如何在vue js3中从本地json动态设置图像的src答案

【问题标题】：How to set src of image dynamically from local json in vue js3如何在vue js3中从本地json动态设置图像的src
【发布时间】：2021-11-21 10:31:18
【问题描述】：

我的 App.vue 有一个 V-for 来创建一个 Card Component，这个 Card 通过一个 Prop 接收数据。除了图像，一切都很好。

在我的 App.vue 中

<DevJobCard :Job="item" v-for="item in filterSearch" v-bind:key="item.id"/>

我的 json 提供的网址

"logo": "./assets/logos/scoot.svg",

目前我找到的唯一解决方案是将图像放在静态文件夹中并使用此代码，以便您至少可以在生产中看到它。请帮助我:(我这两天没有任何进展

<img v-on="check" :src="'/static' + Job.logo.substring(1)" alt="">

我想知道如果它们是在资产中还是在静态中，如何使它工作

【问题讨论】：

【解决方案1】：

如果你想通过 webpack 加载它们，你可以简单地使用 :src="require('path/to/file')"。试试这个代码：

<img v-on="check" :src="require('/static' + Job.logo.substring(1))" alt="">

【讨论】：

我使用你的代码添加“../”直到到达路径“: src = require ('../../../ static' + Job.logo.substring (1) ) "" 不知道有没有办法引用根路径？所以没有充满“../”，虽然它确实不是问题。非常感谢，我卡了2天?

【解决方案2】：

您的项目已构建，构建过程中的图像路径可能会在构建过程之后发生变化。

您可以尝试使用require() 函数。它在构建时工作：

// v-for="item in yourObject"
<img :src="require('./assets/logos/' + item.logo)" />

这样，webpack 就会知道它需要将路径更改为构建后的路径。

【讨论】：