Nuxt.js + vuetify image not loading

Question

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"
/>

Answer 1

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"/>

Answer 2

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")