Unable to load a background image (SVG or WebP)

support
1

In HTML I have:

<section class="section-sm carousel">
    <div class="container">
        <div>text</div>
    </div>
</section>

In assets/sccs/custom.scss I have:

.carousel {
    background: url("/images/bg.svg") no-repeat top;
}

The background not being loaded. Inspector shows an error Failed to load resource: the server responded with a status of 404 (Not Found). The image is in the folder.

Changing to a different SVG is fine, although works with only one SVG.

Seeing that, I tried resaving the bg.svg in Illustrator – didn’t work. Tried creating a new SVG, a simple shape, in Illustrator – didn’t work.

Tried a WebP format for the same shape (copy/paste from Illustrator to Photoshop) – didn’t work.

Loading a PNG works fine.

None of these files I’m trying to load are in the resources/images folder, not sure if this is relevant.

What might be the problem here?

2

What is the complete path to this file from the root of your project?

What is the baseURL in your site configuration?

Are you having the problem locally or when deploying from GitHub/Netlify/etc.?

3

Complete path is assets/images/bg.svg.

BaseURL is baseURL = "/"

Problem is local, haven’t tried to push to Netlify yet.

If it helps, everything else is working fine, images etc, although this the first time I’m trying to set bg via style sheet. As I said though, another svg, logo.svg, is loading fine including as a background.

4

First, that isn’t a valid baseURL unless you are creating a server-less site, which is rare:
https://gohugo.io/getting-started/configuration/#baseurl

Second, the assets directory is for files passed through an asset pipeline; you’re not doing that.
https://gohugo.io/getting-started/directory-structure/#directories

Assuming your baseURL will not contain a subdirectory, place your image in the static directory in the root of your project

static/images/bg.svg

Finally, depending on the SVG, you may have to add width/height to your CSS rule.

5

Placing the image is static/images worked, thank you.

Question though: why other images in assets/images get piped? And what do I need to do for each new image going into the assets/images folder? I was assuming everything in this folder gets piped.

6

If you pipe it, it gets piped. If you don’t, it doesn’t. There’s no automatic piping.

7

The assets directory is for global resources to be captured with any of:

Once captured, you can pass it through various transformation pipelines, then invoke its Permalink, RelPermalink, or Publish method to publish to the public directory.

I suggest spending some time reading the documentation.

1 Like
8

It could be that you have a copy of images in static/images folder which is allowing them to be referred without being piped. Any resource from assets folder needs to be piped, as mentioned by previous responders.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.