V-FOR VUE 不显示图像

Question

我正在使用 VUE，当使用 V-FOR 时，我尝试显示图像，但它没有显示它们。我使用 V-FOR 遍历的文件是一个简单的 JSON，结构如下：

[
    {
        "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"
    }
]

我通过以下方式完成它：

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

并且发生了不显示图像的上述错误。但是，如果我在不使用 VUE 的情况下对图像路径进行步进，则可以正常工作：

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

附加图片以显示错误。

谢谢。

Answer 1

调用方法并要求图像作为返回值：

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

Answer 2

根据您处理资产的方式，您可能需要导入图片：

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

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