# Sage + Bud problem loading images

**URL:** https://discourse.roots.io/t/sage-bud-problem-loading-images/23840
**Category:** bud
**Tags:** bud, bedrock, sage10
**Created:** 2022-09-02T15:32:55Z
**Posts:** 13

## Post 1 by @Mehk — 2022-09-02T15:32:56Z

I am using Sage and Bud 6.3.3 with Tailwind and PostCSS but my images are getting the incorrect path in the browser.

**bud.config.mjs**

```
// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/getting-started/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(['images'])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(['resources/views/ **/*', 'app/** /*'])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy('https://blue.lndo.site')

    /**
     * Development origin
     */
    .serve('http://0.0.0.0:3000')

    /**
     * URI of the `public` directory
     */
    .setPublicPath('/app/themes/blue-theme/public/');
};
```

**CSS file:**

```
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.pattern {
  background-image: url('../images/pattern.png');
}
```

The source image is in: web/app/themes/blue-theme/resources/images

Bud compiles when using the path like this. However in Chrome Inspector the path shows up like this: [https://blue.lndo.site/images/pattern.png](https://blue.lndo.site/images/pattern.png) throwing a 404. Does anyone know what I am doing wrong here?

---

## Post 2 by @ben — 2022-09-02T15:38:34Z

Howdy!

What version of Acorn are you on? There were some compatibility issues recently with a couple of Bud and Acorn versions. If you upgrade to the latest Bud 6.3.x and the latest Acorn 2.x, this issue should be resolved

---

## Post 3 by @Mehk — 2022-09-03T05:58:29Z

I’m at 2.1.2. which is the latest I think? I did just now upgrade bud, bud-tailwindcss and sage to 6.3.5 but that doesn’t do the trick either unfortunately :frowning:

Any other path than: ‘…/images/pattern.png’ bud will fall over, but in the browser it shows up as `images/pattern.png’ which fails in a 404.

---

## Post 4 by @Mehk — 2022-09-04T10:14:19Z

Turns out the path does become correct when using `npm run build` but it fails again once using `npm run dev`

---

## Post 5 by @Martin_Pouzar — 2022-09-05T11:55:05Z

Same problem … Also latest package versions… Also resolved if “yarn build” used

---

## Post 6 by @tedw — 2022-09-06T14:03:53Z

@Mehk What’s the path to your CSS file? In older versions of Sage all image paths had to be relative to the `/styles` folder but now they must be relative to the Sass partial itself (i.e. you may need to switch to `../../images/pattern.png` if your CSS file is nested in a subfolder within `/styles`).

FWIW my public path starts with `/wp-content/` so maybe that’s the culprit?

`.setPublicPath('/wp-content/themes/blue-theme/public/');`

Good luck!

---

## Post 7 by @Mehk — 2022-09-08T04:54:54Z

Hi @tedw , thanks for your reply,

the setPublicPath is this:

```
.setPublicPath('/app/themes/blue-theme/public/');
```

- I have tried having the background-url call in a first level file and in a subfolder both don’t work
- I am not using Sass, in the Sage installation procedure I went for PostCSS only
- This is a brand new installation with latest Bedrock and Sage so not much was changed

How is your path starting with wp-content? are you not using Bedrock?

---

## Post 8 by @tedw — 2022-09-08T13:11:14Z

@Mehk Oh ok. Yes, I’m using Bedrock but customized it slightly since my sites are hosted on Pantheon.

Can you post the rest of your Bud config file?

---

## Post 9 by @Mehk — 2022-09-12T04:58:34Z

Here it is:

```
// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/getting-started/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
      login: '@styles/login',
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(['images'])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(['resources/views/ **/*', 'app/** /*'])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy('https://blue-theme.lndo.site')

    /**
     * Development origin
     */
    .serve('http://0.0.0.0:3000')

    /**
     * URI of the `public` directory
     */
    .setPublicPath('/app/themes/blue-theme/public/');
};
```

---

## Post 10 by @Mehk — 2022-09-13T06:12:32Z

This topic gave me some insight as it looks to be about the same issues:

> [@Sage 10 and assets](https://discourse.roots.io/t/sage-10-and-assets/21945/2):
>
> I’m having a similar problem. I’m putting my images on resources/images folder, and trying to use on my CSS as this: .background { background-image: url("../images/background.svg"); } In the same wey that is in the [documentation](https://docs.roots.io/sage/10.x/compiling-assets/#images-in-css). It works after running yarn build, but not while running rand dev, neither on the live preview http://localhost:3000/ nor on http://localhost:3000/, the images doesn’t load, because the browser is trying to load them on a different directory.

I didn’t know it was a requirement to “use” the proxy url when using bud in development, my bad.  
I thought it would just proxy the requests.

---

## Post 11 by @Jacek — 2022-09-13T09:43:00Z

Hey,

Try with set one more ‘…/’ to relative path as below:

```
.pattern {
  background-image: url('../../images/pattern.png');
}
```

---

## Post 12 by @Mehk — 2022-09-13T12:08:26Z

Hi Jacek,

Thanks but the problem has already been solved. Note that I had already tried changing the path (as stated before) but bud will throw a warning saying its incorrect, so the path is fine, just wasn’t using the proxy properly.

---

## Post 13 by @igor_sumonja — 2022-09-22T17:31:41Z

I have similar issue if someone can help, using latest Sage10 theme…

when I do this

```
<img src="@asset('images/pattern-dummy-image.jpg')" alt="">
```

it work just fine

but when I try to use same image in SCSS

```
.accordion {
  background: url("images/pattern-dummy-image.jpg");
}
```

I am gettint error on both dev build and production buld with

```
ERROR ./resources/styles/app.scss

Module not found: Error: Can't resolve './blocks/images/pattern-dummy-image.jpg' in './resources/styles'
```

Not sure how where to look to get this fixed ? So same image path work in blade template but not in CSS

Ok I figured it out so let me write it if someone need it…

I am using the SCSS and partial is inside another subfolder, so all I needed to do is to get to relative path of image directory in css

```
background: url("../../images/pattern-dummy-image.jpg");
```