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

我发现了一些事情：

• 硬编码 URL 似乎可以正常工作
• 来自网络的占位符似乎也可以正常工作（例如，https://picsum.photos/200 可以正常工作）
• .png 等其他文件扩展名也不起作用

Answer 1

更改图标的目录最终对我有用。将图标从“assets”文件夹更改为“public”文件夹。