images folder doesn't show up in the sources tab in the dev tools

Hello there, I am trying to create a portfolio webpage. I have a container display set to grid, with 6 divs inside. I added background-image: url(); and inserted the path of the image for each div. But its not working, and i got an error in the console:
Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)
I shared a screenshot of the file structure and the .json scripts
9 Replies
jj_roby_1993
jj_roby_1993•2y ago
html and css (scss)
jj_roby_1993
jj_roby_1993•2y ago
the images folder doesn't seem to show up in the sources tab in the inspect tool
~MARSMAN~
~MARSMAN~•2y ago
~MARSMAN~
~MARSMAN~•2y ago
Which folder is your project at? I see the same two html pages and images folders. Where's your HTML file and images folder at? If your images folder is in the same parent/main folder as your HTML file, try and use url("/images/<img_name>.png")
jj_roby_1993
jj_roby_1993•2y ago
@therealmarsman the file structure is for the npm scripts. It watches sass files and copies the compiled css into the public folder. The npm script also copies over the index.html file, as well as the javascript and the images in the image folder.
~MARSMAN~
~MARSMAN~•2y ago
Oh sorry my bad, not my stuff then 😬 But the problem i believe is that browser cannot find find the images path. Did you manage to solve it?
jj_roby_1993
jj_roby_1993•2y ago
I haven't. It's probably something to do with these scripts. I like to use SASS, and was using these scripts to watch scss files the right way because the extension doesn't always work
Kevin Powell
Kevin Powell•2y ago
Since everything is in the public folder, that's the root of the project, so you can't really navigate to their (or well, even if you could, once it's on the server I don't think it would work anyway)... I'd just do background-image: url('../images/.....');
jj_roby_1993
jj_roby_1993•2y ago
🤦 I thought I tried this, but I guess not as that worked. Thanks Kevin!