# Sage 10 and assets

**URL:** https://discourse.roots.io/t/sage-10-and-assets/21945
**Category:** sage
**Tags:** sage, sage10
**Created:** 2021-12-23T07:25:18Z
**Posts:** 14

## Post 1 by @sebastien-metzger — 2021-12-23T07:25:18Z

Hello,

I am using Sage 10.0.0-beta.2 and I have some trouble using assets. I didn’t modify bud.config.js except the proxy:

- images are copied in public/assets/images
- fonts are not copied and there is a bug with Bud when using them ([Roots Sage 10 - Bud build doesn't load custom fonts, and shows resolve-url-loader warning](https://discourse.roots.io/t/roots-sage-10-bud-build-doesnt-load-custom-fonts-and-shows-resolve-url-loader-warning/21898))

I have followed the documentation to use images in my templates:

```
<img src="@asset('images/example.jpg')">
```

But it doesn’t work. I need to write the following:

```
<img src="@asset('assets/images/example.jpg')">
```

Moreover, I have modified the proxy to see them on [http://localhost:3000/:](http://localhost:3000/:)

```
.proxy({
            url: "https://original.url.of.my.local.dev",
            replace: {
                href: true,
                window: true,
                publicPath: false
            }
        })
```

My questions are:

- why Bud copies images in a subfolder named assets? Can I modify this?
- why fonts are not copied in public directory?

Have a great day.  
Best Regards,

---

## Post 2 by @jasaldivara — 2021-12-26T18:57:28Z

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.

---

## Post 3 by @ben — 2021-12-27T16:01:52Z

Confirming the OP’s behavior is a bug /cc @kellymears @QWp6t

Unable to reproduce @jasaldivara’s issue (images referenced from CSS are working as expected via `yarn build` and `yarn dev`)

---

## Post 4 by @ben — 2021-12-28T15:22:55Z

Forgot to mention regarding the fonts issue, @kellymears has a workaround here you can use before the next Bud release: [Sage: url() in @font-face declaration doesn't work · Issue #822 · roots/bud · GitHub](https://github.com/roots/bud/issues/822#issuecomment-999037708)

---

## Post 5 by @sebastien-metzger — 2021-12-28T17:06:06Z

Thank you! Font icons work now :slight_smile: (I didn’t read the workaround, I was waiting for an official release)

---

## Post 6 by @jasaldivara — 2021-12-28T23:47:27Z

(I have a typo on my previuos comment. It should say `yarn dev` instead of `rand dev`. Not sure how can I edit that.)

Turns out I had a bad proxy configuration on my `bud.config.js`. I was using only my hostname, instead of the full site url (since that was how it worked on a previous dev version before beta 2). Once I configured correctly the proxy, my images loaded both on `yarn build` and `yarn dev`.

I’m still noticing something strange: Background images don’t load on my ‘normal’ (non live) site while i’m running `yarn dev`. I have to stop `yarn dev` and run `yarn build` for the images to load. I’m not sure if this is considered a bug.

I also have noticed another strange behavior. When adding the line `.assets(['resources/images'])` to my `bud.config.js`, the images are saved in `public/assets/images`, but images refrenced on CSS are saved in `public/assets`. So if I keep that line on `bud.config.js`, the images are duplicated on two different directories. For me, the easy solution is to just omit that line from my config file.

---

## Post 7 by @baillieogrady — 2021-12-29T14:10:13Z

I’m having a similar issue, when referencing images in css using `yarn dev`:

Example: background-image: url(’…/images/music.svg’);

It’s emitting the absolute url of the current page: [http://localhost:3000/questions/qa-title-speaker-name-here/assets/music.svg;](http://localhost:3000/questions/qa-title-speaker-name-here/assets/music.svg;)

Rather than the root directory: [http://localhost:10004/wp-content/themes/changesource/public/assets/images/question\_2.jpeg](http://localhost:10004/wp-content/themes/changesource/public/assets/images/question_2.jpeg)

When using `yarn build` however, the images are emitted correctly:

[http://localhost:10004/wp-content/themes/changesource/public/assets/images/question\_2.ede033.jpeg](http://localhost:10004/wp-content/themes/changesource/public/assets/images/question_2.ede033.jpeg)

---

## Post 8 by @ben — 2021-12-29T15:47:46Z

> [@baillieogrady](#):
>
> Example: background-image: url(’…/images/music.svg’);

1. Please use the proper formatting when `pasting code on here`
2. You’ll need to use `..`, not `...`

---

## Post 9 by @ben — 2021-12-29T15:49:02Z

> [@jasaldivara](#):
>
> I’m still noticing something strange: Background images don’t load on my ‘normal’ (non live) site while i’m running `yarn dev`. I have to stop `yarn dev` and run `yarn build` for the images to load. I’m not sure if this is considered a bug.

Please provide some code so I can drop it on my theme for testing :smiley:

---

## Post 10 by @ben — 2021-12-29T16:39:18Z

Filed a bug on the Bud repo for anyone who wants to follow for the `@asset` issue

> <https://github.com/roots/bud/issues/897>
>
> ### Terms
> 
> - [X] I have read the [guidelines for Contributing to Roots Projects]…(https://github.com/roots/.github/blob/master/CONTRIBUTING.md)
> - [X] This request is not a duplicate of an existing issue
> - [X] I have read the [docs](https://roots.io/docs/) and followed them (if applicable)
> - [X] I have seached the [Roots Discourse](https://discourse.roots.io/) for answers and followed them (if applicable)
> - [X] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community
> 
> ### Description
> 
> #### What's wrong?
> 
> Sage 10's [`@asset`](https://roots.io/docs/sage/10.x/compiling-assets/#theme-assets) directive isn't referencing assets from the correct directories
> 
> #### What have you tried?
> 
> `<img src="@asset('images/example.jpg')">`
> 
> #### What insights have you gained?
> 
> Bud's `public` directory throws the assets into an `assets/` subdirectory
> 
> #### Temporary workarounds
> 
> `<img src="@asset('assets/images/example.jpg')">`
> 
> ### Steps To Reproduce
> 
> 1. From a Sage 10 theme, place an image in `resources/images/`
> 1. Run `yarn build`
> 1. Try to use the `@asset` directive as documented/expected
> 
> 
> ### Expected Behavior
> 
> The asset directive should load the asset
> 
> ### Actual Behavior
> 
> The asset can't be found
> 
> ### Relevant Log Output
> 
> _No response_
> 
> ### Versions
> 
> v5

---

## Post 11 by @baillieogrady — 2021-12-29T19:18:53Z

Noted and I’m not sure why there’s an extra dot here, only two in my code.

Is this default path for beta 2: `../images/image.jpeg` ?

---

## Post 12 by @ben — 2021-12-29T19:35:40Z

Yep that’s correct

Is your local dev URL `http://localhost:10004/`? That probably needs to be a host without a port to work correctly?

---

## Post 13 by @jasaldivara — 2022-01-08T21:00:07Z

Sorry for the delay

This is the code from my scss (SASS) file:

```
.teaser,
.teaser-secundario {
  display: flex;
  flex-direction: column;

  .thumbnail {
    flex-grow: 1;

    img {
      height: 100%;
      object-fit: cover;
    }
  }

  .encabezado {
    background-color: teal;
    color: white;
    background-size: cover;
    background-position: left center;
    text-align: center;

    :link,
    :visited {
      color: white;
    }

    &.verde {
      background-color: #5f9f48;
      background-image: url("../images/encabezado_verde.svg");
    }

    &.naranja {
      background-color: #fe8709;
      background-image: url("../images/encabezado_amarillo.svg");
    }

    &.rosa {
      background-color: #f01e5b;
      background-image: url("../images/encabezado_rosa.svg");
    }
  }

  h3 {
    font-size: 1.15rem;
  }

  h4 {
    font-size: 1rem;
  }
}
```

This is the code from my blade template:

```
@if ( $query_destacadas->have_posts() )
  <div class="teaser">
    @php ( $query_destacadas->the_post())
    <div class="thumbnail">
      <a href="{{ wp_get_shortlink() }}">
        {!! get_the_post_thumbnail() !!}
      </a>
    </div>
    <h3 class="encabezado verde">
      <a href="{{ wp_get_shortlink() }}">
        {{ the_title('', '', false ) }}
      </a>
    </h3>
  </div>
@endif
```

This is what I see on Google Chrome developer tools when inspecting `h3.encabezado` after running `yarn build` (background image is loading correclty):

```
.teaser-secundario .encabezado.verde, .teaser .encabezado.verde {
    background-color: #5f9f48;
    background-image: url(assets/encabezado_verde.4df3bf.svg);
}
```

This is what I see on Google Chrome developer tools when inspecting `h3.encabezado` while running `yarn dev` (background image is not loading):

```
.teaser .encabezado.verde, .teaser-secundario .encabezado.verde {
    background-color: #5f9f48;
    background-image: url(http://my-workstation/my-website/assets/encabezado_verde.svg);
}
```

---

## Post 14 by @system — 2022-02-03T07:26:01Z

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