Sage + Bud problem loading images

[Mehk]

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 throwing a 404. Does anyone know what I am doing wrong here?

[ben]

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

[Mehk]

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

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.

[Mehk]

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

[Martin_Pouzar]

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

[tedw]

@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!

[Mehk]

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?

[tedw]

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

[Mehk]

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/');
};

[Mehk]

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

Sage 10 and assets

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

[Jacek]

Hey,

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

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

[Mehk]

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.

[igor_sumonja]

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");