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

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

tr.mat-footer-row {
    height: 100px;
}

Answer 2

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

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

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