Dear Community User! We are updating our platform to a new system.
Read more: Important information on the platform change.

cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Unable to load Background image in a container WebIQ v2.9

Unable to load Background image in a container WebIQ v2.9

Yacine
Long-established Member

Hello Team, 

I configured a background image through a CSS class in order to be integrated in a container, 

But I noticed that it is correclty displayed using WebIQ Preview but Once I publish it to the target, in a webBrower, the Backround is no more loaded (example below), I'm using WebIQ 2.9, is it normal ?

The Image was put in the AppData folder : C:\Users\userName\AppData\Roaming\webiq-designer\workspace\pics\custom\Background

Thanks.

2021-06-04_13h23_30.png

2021-06-04_13h29_27.png

6 REPLIES 6

webiq-eg
Long-established Member

Hello, it should normally work like this. Is there a problem with the browser cache? Please try to clear the cache. Please also see whether the background image is available in the published version of the HMI.
I wish you success
webiq-eg

Yacine
Long-established Member
Hello, I cleared the cache of my browsers many times,(computer, Tablet, ) but it is background is not updated. For my point of view, the image is not published to the runtime as we are only able to see it with the preview (image copied only in the appdata folder), how can we check if the image is published in the ctrlx WebIQ runtime ? Thanks.

GB_
Established Member

Hello, 

i have the same problem.

Anyone had found a solution?

Thanks you very much

GB_
Established Member

I have solved the problem, you don't have to point at c:/.... but at HTTP://192.168.1.1:10123/..... you can see the right path ispectioning the web page.

HmiGuide
Community Moderator
Community Moderator

That's a very common failure. You always must use relativ pathes to the project directory. You even should not provide the URL in the path name. If you do that you must adapt it, when the IP address changes or you run the project on. When you use iq-image in WebIQ it automatically uses a relative path.

webiq-sk
Frequent Contributor

Please note that you CANNOT use local file system paths as this instructs the browser to load the file from the viewer's disk! We're using web technology here and whatever you instruct the browser to use as a src will be honored - in this case when using a filesystem path (which would have to use file:/// syntax anyway) it would always refer to the browser side. That's how web technology works.

Always use relative paths as explained before.

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist