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

Question

我的App.vue有一个V-for来创建一个Card组件，这个Card通过Prop接收数据。一切正常，除了图片。

在my App.vue

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

json提供的url

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

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

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

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

Answer 1

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

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

Answer 2

您的项目已经构建，并且构建过程中的映像路径可以在构建过程后更改。

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

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

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

你可能想检查这个问题:https://stackoverflow.com/a/57350255/1722529