Nuxt custom loading indicator - how to show image from assets folder

0
votes

In my nuxt.config.js I reference a custom html page for the loading-indicator property:

loadingIndicator: '~/custom-loading-indicator.html',

I want to show a logo from the assets folder on this page, but I have trouble referencing it so that it gets loaded. I guess it's linked to how webpack reads the file path.

What does work is referencing an external url as img src. As the html file is a the root and loaded before the javascript, I don't know how webpack handles it.

All the options I tried:

<div class="test"></div>  
            <img :src="require(`~/assets/images/header/logoWhite.png`)" />
            <img :src="~/assets/images/header/logoWhite.png" />
            <img src="@/assets/images/header/logoWhite.png" />
            <img :src="~~/assets/images/header/logoWhite.png" />
            <img src="@@/assets/images/header/logoWhite.png" />
            <img src="./assets/images/header/logoWhite.png" />

In the css:

.test {
    width:300px; height:300px;
    background-image: url('~assets/images/header/logoWhite.png');
}
1
nuxt.js

1 Answers

0
votes

Move your logo from your assets folder to the static folder.
Then you can do either:

<img src="logoWhite.png">

or

.test {
  background-image: url("logoWhite.png");
}