Loading image in SCSS

sage
1

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

I used WAMPP server, localhost, my config.json

{
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “/wp-content/themes/sage”,
“devUrl”: “http://localhost/”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
“app//*.php",
"config//.php",
"resources/views/**/.php”
]
}

Nothing worked. I put this code in _header.scss.
My JS works fine. And image exist ofc. in dist/images

2

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).

3

Ofc i used two dots. What you mean about fancy quotes?

4 
   “watch”: [],
// ^     ^ fancy, curly, typographic, Unicode
   "config//.php",
// ^            ^ non-fancy, ASCII

see also: https://en.wikipedia.org/wiki/Quotation_mark#Electronic_documents

5

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.

But, my image still can’t load :frowning:

6

OK, then.

  • 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”?
7

Hmmm… I thought it worked because I edited footer and everything worked fine. But now I’m in consternation. Look:

GET http://localhost:3000/wp-content/themes/sage/dist/styles/main.css net::ERR_ABORTED 404 (Not Found)

GET http://localhost:3000/dist/images/hero.jpg 404 (Not Found)

Now the problem seems more complicated…

8

Yup, weird.

  • 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.

9

This topic was automatically closed after 42 days. New replies are no longer allowed.