Image src in carousel singleItem component. Vue + nuxt

Question

I have to display products img in singleItem component. I have API(file) with objects like:

 {
        "name": "stand",
        "type": "T01",
        "link": "xx/xxx/317951/?cv=6&board=cat_all__type_all__id_4244",
        "width": 148,
        "height": 53,
        "depth": 32,
        "img": "assets/images/stand/317951.jpg",
        "img_webp": "assets/images/stand/317951.webp",
        "stand_type": "1"
    },

in singleItem component I try:

  <div class="item">
  <div class="item__img">
      <img :src="item.img"> -- display nothing
      <img :src="'~/' + item.img"> display nothing
      <img src="~/assets/images/shelf/317951.jpg"> - show right img
  </div>
  {{item.img}} - display string 'assets/images/stand/317951.jpg'

give me some solution or hint to deal with it please.

Nicolas Pennec Nicolas Pennec · Accepted Answer · 2021-01-18T14:51:58

You have to use the require directive as follows:

<img :src="require('~/' + item.img)">

see docs: https://nuxtjs.org/docs/2.x/directory-structure/assets

Another way is to move your static assets (jpeg/webp) in your nuxt static directory.

Example, for an image file saved at the following path static/images/stand/317951.jpg, the public source will be available at the following URL /images/stand/317951.jpg (or with the full url: http://localhost:3000/images/stand/317951.jpg)

Image src in carousel singleItem component. Vue + nuxt

1 Answers