在 Vue 3 中将 JSON URL 绑定到 IMG

Posted 2023-02-22

【中文标题】在 Vue 3 中将 JSON URL 绑定到 IMG

【英文标题】：Binding JSON URL to IMG in Vue 3

【发布时间】：2021-05-03 08:53:41

【问题描述】：

我正在 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 等其他文件扩展名也不起作用

【参考方案1】：

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