Image is not shown with V-FOR VUE

Question

I am working with VUE and when using a V-FOR I try to show the images but it does not show them. The file I walk with V-FOR is a simple JSON structured as follows:

[
    {
        "id": 1,
        "name": "Lavandería",
        "img": "../assets/img/icons/rinse.png"
    },
    {
        "id": 2,
        "name": "Tintorería",
        "img": "../assets/img/icons/shirt-2.png"
    },
    {
        "id": 3,
        "name": "Planchado",
        "img": "../assets/img/icons/iron.png"
    },
    {
        "id": 4,
        "name": "Otros",
        "img": "../assets/img/icons/fashion.png"
    }
]

And I go through it in the following way:

<div class="item-servicios-select" v-for="item in services" :key="item.id">
    <div class="card select-item">
        <div class="card-content service-content">
            <div class="service-icon">
                <img class="responsive-img" :src="item.img" alt="">
                {{ item.name }}
            </div> 
        </div>
    </div>
</div>

And the mentioned error occurs that does not show the image. However if I do step the image path without using VUE works correctly:

<div class="item-servicios-select">
    <div class="card select-item">
        <div class="card-content service-content">
            <div class="service-icon">
                <img class="responsive-img" src="../assets/img/icons/rinse.png" alt="">
                TEST
            </div> 
        </div>
    </div>
</div>

Attached image to show error.

Thank you.

Silly question, perhaps, but are the images from the API on the same host? — jdlm
– jdlm, Commented Apr 29, 2019 at 5:27

Sajib Khan · Accepted Answer · 2019-04-29 05:07:07Z

2

Invoke a method and require the image as a return value:

<template>
  ...
  <img class="responsive-img" :src="getImage(item)" alt="">
  {{ item.name }}
  ...
</template>
<script>
  ...
  methods: {
    getImage(item) {
      return require(item.img);
    }
  }
  ...
</script>

answered Apr 29, 2019 at 5:07

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

OscarDev Over a year ago

when trying, it shows me the following error: Error in render: "Error: Cannot find module '../assets/img/icons/rinse.png'"

jdlm Over a year ago

@OscarDev Do you have a webpack loader capable of loading images set up? Such as file-loader?

WuerfelDev Over a year ago

If someone runs into problems, I needed to hardcode the path to start from the root dir: stackoverflow.com/a/37228426/4346956

jdlm · Accepted Answer · 2019-04-29 05:10:07Z

0

Depending on how you handle your assets, you probably need to import your images:

<template>
  <!-- ... -->
    <img class="responsive-img" src="myImage" alt="">
  <!-- ... -->
</template>

<script>
import myImage from '../assets/image.png';
// ...
</script>

answered Apr 29, 2019 at 5:10

jdlm

6,7545 gold badges34 silver badges50 bronze badges

2 Comments

OscarDev Over a year ago

the problem would be when there are many images from some API

jdlm Over a year ago

Ah, totally missed that. I blame the noise from the train on the morning commute. ;)

Collectives™ on Stack Overflow

Image is not shown with V-FOR VUE

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related