在Vue 3中绑定JSON URL到IMG

Question

我正在Vue 3中构建一个应用程序，列出当地商店。为了添加和删除存储，我制作了一个JSON文件来列出它们，其中包括一个指向图像图标(SVG)的URL。JSON文件被导入到我的Vue组件中，并正确列出了商店。但是，对于图像文件，情况并非如此，请参阅下面的代码。

JSON>

[
{
"storeName": "Kapper",
"storeId": "s0001",
"imgUrl": ""
},
{
"storeName": "Manicure",
"storeId": "s0002",
"imgUrl": ""
},
{
"storeName": "Supermarkt",
"storeId": "s0003",
"imgUrl": "../../assets/icons/021-grocery.svg"
]

VUE>

<template>
<ul class="storeList">
<li class="store" v-for="data in $options.stores" v-bind:key="data">
{{data.storeName}}
<img :src="data.imgUrl"/>
</li>
</ul>
</template>
<script>
import stores from './stores.json'
export default {
stores: stores,
}
</script>
<style lang="scss" scoped>
@import './styles.scss';
</style>

Some things I found out:

• 硬编码URL似乎工作良好
• 来自web的占位符似乎也工作得很好(例如https://picsum.photos/200工作完美)
• 其他文件扩展名如。png也不工作

Answer 1

最后改变图标的目录对我来说是有效的。更改了"资源"中的图标文件夹到"公共"文件夹文件夹。