The image that the file is associated with can not be loaded as stated by the developer tool because the path does not exist. The developer tool added a folder (styles) to the file path to the file path of the image I want loaded. Why, and how do I remedy this? Reference photos. Thanks for your help.
Hi @aguyformerlyknownas !
Can you share more details? The screenshots do not show the full error message or the full rules, so it’s very hard to give any advice here. Even better, could you share the URL where we can reproduce this issue?
Thanks
Thanks for your reply. The url is my local machine. I cut the image at my local machines name. I have restarted firefox and cleared it’s cache. I restarted visual studio as well.
Ok so purely guessing here, I imagine you are loading your header-sidebar.css file from a styles folder. The url images/header-sidebar/... used in this file is a relative URL which starts from the folder of your stylesheet.
So I don’t think DeveloperTools are adding a styles folder.
If your file layout looks like:
- index.html
- styles
|
+- header-sidebar.css
- images
|
+- header-sidebar
|
+- small
|
+ sm...symbol.png
then you have to use ../ (eg url("../images/header-sidebar/small/${your_image_filename}")) to reach the good folder.
The styles and images folders are separate folders, next to each other in the main folder. This is why i don’t understand why the devtools creates a new path adding the images into the styles folder.
The styles and images folders are separate folders
Yes, this is what I tried to represent with my tree structure. The url("images/...") is declared in a CSS file which is in the styles folder. This will create a relative URL starting from styles/. Again this has nothing to do with DevTools, it’s just how relative URLs work. Maybe take a look at https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#absolute_urls_vs_relative_urls if you want some explanations about URLs. Or see the suggestion in my previous comment.
I understood what you were saying both times. I had, before I posted here, added different iterations in front of the image path from …/ to …/… and even // by itself. It continues to show the same path from the styles folder, and of course, no image. That’s why I went the clearing cache route. I appreciate the time you’ve given me. Thanks.
Also, the header-sidebar page is in the main folder.
The // wasn’t removed before the screenshot was taken.
This is a screenshot of the site tree.
strong text After going back and forth so much, I realized that I wasn’t focused on the correct image path. When I scrolled through the code and found the correct image, everything fell into place. Sorry for taking up so much of your valuable time with something as trivial as not scrolling to the proper image to begin with.
No worries, glad you managed to make it work!
