8

I'm using Nuxt.js + Vuetify, but the images are not able to load in my next page files. For example, in my ./pages/browse/index.vue, I have a vuetify image tag like this:

<v-img src="~/assets/img/test.png" style="width:300px" contain ></v-img>

The image is located at assets/img/test.png, however, whenever I started my Nuxt server, the image won't show up, below is the copied div element from Chrome dev tool: 

<div class="v-image__image v-image__image--contain" style="background-image: url(&quot;http://localhost:3333/browse/~/assets/img/test.png&quot;); background-position: center center;"></div>

The image only works if I do not use Vuetify image component like this:

<img src="~/assets/img/test.png" style="width:300px" />
Improve this question

4 Answers 4

Reset to default
20

Consider adding images under the static folder. assets folder is for css/sass/scss files that need to be parsed by webpack. Yes, you can add small images to assets which will then be converted to base64 when webpack parses it. But these images can then loaded on the app using only <img /> tag and not through <v-img /> component of vuetify.

My understanding is that <img /> can take a base64 string and then it will load the corresponding image but in <v-img /> its expecting src to be the URL of the image. When you give a base64, boom, it won't load anything!!!

Use static folder

--static --img

And then you access image anywhere from the app using 

<v-img src="img/test.png"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, I have tested it, It's actually <v-img src="/img/test.png"/>
This works for me without the leading / so YMMV.
6

Are you using Nuxt 2.0? If so, note the warning in their webpack section here:

Warning: Starting from Nuxt 2.0 the ~/ alias won't be resolved correctly in your CSS files. You must use ~assets (without a slash) or the @ alias in url CSS references, i.e. background: url("~assets/banner.svg")

Improve this answer

Comments

3

You can wrap the v-img tag inside the no-ssr tag, something like this.

<no-ssr> <v-img src="~/assets/img/test.png" style="width:300px" contain ></v-img> </no-ssr>

If that doesn't work you can try this

<v-img :src="require('@/assets/img/test.jpg')" style="width:300px" contain ></v-img>
Improve this answer

Comments

2

Try requiring the image like so: <v-img :src="require('~/assets/images/background-1.jpg')" />

That worked for me.

The problem seems to be with v-img rather than nuxt

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.