I have a very simple HTML file, this is the body:
<body>
<a href=";>
<img src="./youtubeLogo.png" alt="YouTube">
<h1>YouTube</h1>
</a>
</body>
The issue is that the image is not working in Firefox. It works as expected in Chrome, but not Firefox. I cannot figure any reason why this is happening. I see no errors in Firefox, just "Could not load the image" when I hover it in the inspector.
This is just a local file, no server. Just directly opening it in the browser. Why will the image not load in Firefox?
I have a very simple HTML file, this is the body:
<body>
<a href="https://youtube">
<img src="./youtubeLogo.png" alt="YouTube">
<h1>YouTube</h1>
</a>
</body>
The issue is that the image is not working in Firefox. It works as expected in Chrome, but not Firefox. I cannot figure any reason why this is happening. I see no errors in Firefox, just "Could not load the image" when I hover it in the inspector.
This is just a local file, no server. Just directly opening it in the browser. Why will the image not load in Firefox?
Share Improve this question asked Feb 15 at 22:50 Lee ManLee Man 6962 gold badges8 silver badges31 bronze badges 5 |3 Answers
Reset to default 0The reason is the very fact that it is a local file. Browser access to the file system is a security concern and treated slightly different by vendors.
The strict origin policy for file URIs in firefox will most likely be the cause.
The question is, if you only want this solved for yourself and on your own machine. Then you can type:
about:config
into your Firefox address field.
Browse and change the following setting to false:
security.fileuri.strict_origin_policy
Please consider the implications of lowering your security on that machine. It may not be a big issue on an offline machine, that doesn't browse risky content etc.
This will not solve the issue for viewers on other machines, unless they make the same changes to their config.
It seems that there is no issue with the links, they work perfectly fine. I tested this on multiple different browsers, including Firefox on other machines, everything works perfectly fine.
Despite what other answers/comments claim, this works fine in Firefox and Chrome. You don't need to change settings or use an absolute path.
My issue seems to have been some settings or plugins in my browser that I have changed. Haven't figure out what those are yet, but the image links work normally.
Firefox has some strict rules for the local files, while Chrome is lenient. That is why you have issues like this. Use absolute path <img src="file:///C:/path/to/youtubeLogo.png" alt="YouTube>
./youtubeLogo.png— relative to what directory? :-) – Sergey A Kryukov Commented Feb 16 at 7:46./means current working directory. The directory that the html file is in. – Lee Man Commented Feb 16 at 14:50./means path relative to some directory. Some base directory. It could be current directory, it could be executable directory, it depends on what application does. The standards define the processing of relative paths in some artifacts, files, such as HTML. But who told you that the address line is processed this way? – Sergey A Kryukov Commented Feb 16 at 15:08