Hi, I have problem with image loading. I tried everything from previous topics but nothing work.
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("‥/images/hero.jpg");
}
also I tried ‥/dist/images/hero.jpg or ‥/resources/assets/images/hero.jpg and ‥/images/hero.jpg
This is probably an auto-formatting issue, considering there are fancy quotes in your config.json, but you did not use three dots instead of two (../images/) in the URL path, by any chance, did you? (I assume that you did not put an actual Unicode ellipsis (cf. … vs ...) there).
Thanks, now i understood. But in Visual Studio Code it looks fine. I’m sure the editor on this page has formatted it this way. I don’t changed it manually in config.json. The dots have been copied here in the same way. Now they looks normal. I fixed it.
Have you checked the compiled CSS? If it’s minified, I use something like grep -Po .............hero.jpg to check the paths. (Or try a Ctrl-F of hero.jpg search in your favorite GUI editor.)
Do you get a 404 in your browser’s Dev Tools? What does the path say? Have you tried “Right click + open in new tab”?
the browser shouldn’t even get to your image if it did not find main.css. (Although the ABORTED error might come from hot-reloading/browsersync, not sure about that.)
anyway, your publicPath (wp-content/...) is missing from the image’s path, which either means a misconfiguration of the dev server (like a wrong publicPath in config.json) or somehow you get an absolute path in your compiled CSS, thus, again:
what does your compiled CSS say? Does dist/styles/main.css exist? How is hero.jpg referenced there?
I had an issue with absolute paths recently, but I tried to run WP in a subdirectory locally/on the dev server (test.dev/example.com/wp-content), and in root for production (example.com/wp-content) and found that this setup just causes headaches… But I guess your problem is different.