27.2 Browser Source no longer HTML/CSS will no longer load local images with absolute paths.

[Stuwot]

Hi,

I've used a browser source for a while now to show some rudimentary HTML pages as part of what I'm recording. I write the HTML and CSS myself. Until the 27.2 update and the new browser source backend, everything worked fine, but now I'm unable to get the webpages to load local images with an absolute path.

I was able to have something like (in CSS) "background-image: url("S:/Dropbox/A Folder/Another Folder/Yet another Folder/the image.png") and it would work fine. The only way I've been able to get it to work is to use a relative path structure (url("../.../../../Dropbox/A Folder/Another Folder/Yet another Folder/the image.png")...which is a pain for how I use it cause the web page isn't always in the same location when I'm opening it so the relative path can change.

Am I doing something wrong?

I've tried replacing all spaces with %20, I've tried with/without "file:///". The webpage loads fine with absolute paths in Chrome/Edge/Firefox, just not in the browser in OBS.

 

[WizardCM]

Hi there - thanks for the report. I see what's happening - our custom URL handler assumes relative paths, so it prepends the path of the HTML file before inserting the location of the file.

I'll see what I can do. Hopefully I'll get a fix together in time for 27.2.1 or 27.2.2.

 

[Stuwot]

That's great, thanks!

 

[aMytho]

Any update on this? Since updating to the latest version I get this error in the console whenever I try to access local files. It works fine in other browsers so I'm assuming this is an OBS issue.

 

[KBNOtaku]

I also see that issue since 27.2.3!
Any solution out there yet?

 

[aMytho]

Instead of using `file://` we can use `http://absolute/PATH` . My project used JS to change the src of an image. I now use the following code to display local files.

newImage.src = `http://absolute/${filepath}`;

The filepath variable would be the absolute path. ex. C:\Users\JMyth\Documents\Dev\glimeshchat\Every-Glimesh-Chat\media\glimWave.gif
The original post wanted to do the same in CSS. I would imagine the process is the same.

"background-image: url("http://absolute/S:/Dropbox/A Folder/Another Folder/Yet another Folder/the image.png")

 

[KBNOtaku]

I now changed from using local file, to inputing the file path directly with file:/// now it is working again!?