Image in CSS file getting 404 in front-end

Hi all,

We are adding a image url in the resources/styles/app.css file. But when we are checking the front-end it outputs the image url as /images/projects-slider.png which returns a 404 error. We did try to search in the forum, but we couldn’t find any working answer.

Here is the style we did add:

.project-slider:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  height: 20px;
  background-image: url("../images/projects-slider.png");
}

Here is our bud file

// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/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://syboned.test")

    /**
     * Development origin
     */
    .serve("https://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/syboned/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson.settings({
      color: {
        custom: false,
        customGradient: false,
        defaultPalette: false,
        defaultGradients: false,
      },
      custom: {
        spacing: {},
        typography: {
          "font-size": {},
          "line-height": {},
        },
      },
      spacing: {
        padding: true,
        units: ["px", "%", "em", "rem", "vw", "vh"],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};

What do we have to change?
Thanks for your time!

Hi,

If I not mistaken, you can use url('@images/projects-slider.png');

1 Like

@aksld, that also returns a 404 in the front-end with following url /images/projects-slider.png.

Are you following these steps?

  1. yarn dev session is actively running
  2. Visit the dev URL (per your config, it’s https://0.0.0.0:3000

If you aren’t visiting the dev URL and are instead visiting https://syboned.test/ then you will run into this problem.