CODEWITHSUNDEEP
javascriptvue.jswebpackvuetify.jsnuxt.js
Horizon
Horizon

Reputation: 334

Nuxt.js + vuetify image not loading

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

Upvotes: 8

Views: 12378

Answers (4)

HJo
HJo

Reputation: 2205

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

Upvotes: 2

SpiritOfDragon
SpiritOfDragon

Reputation: 1432

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>

Upvotes: 3

Anees Hameed
Anees Hameed

Reputation: 6544

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

Upvotes: 20

dispake
dispake

Reputation: 3329

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

Upvotes: 6

Related Questions