# Loading image in SCSS

**URL:** https://discourse.roots.io/t/loading-image-in-scss/15111
**Category:** sage
**Created:** 2019-03-19T11:25:25Z
**Posts:** 8

## Post 1 by @b4rt — 2019-03-19T11:25:25Z

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

---

## Post 2 by @bikubi — 2019-03-19T11:56:02Z

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

---

## Post 3 by @b4rt — 2019-03-19T11:57:49Z

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

---

## Post 4 by @bikubi — 2019-03-19T12:03:10Z

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

see also: [https://en.wikipedia.org/wiki/Quotation\_mark#Electronic\_documents](https://en.wikipedia.org/wiki/Quotation_mark#Electronic_documents)

---

## Post 5 by @b4rt — 2019-03-19T12:09:53Z

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:

---

## Post 6 by @bikubi — 2019-03-19T12:13:32Z

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

---

## Post 7 by @b4rt — 2019-03-19T12:27:05Z

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…

---

## Post 8 by @bikubi — 2019-03-19T12:42:03Z

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](https://discourse.roots.io/t/can-i-disable-absolute-url-rebase-in-css/14958/5), 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.

---

## Post 9 by @system — 2019-04-30T11:25:27Z

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