如何使用 vue cli 动态更改图像的 src？答案

【问题标题】：How to change the src of an image dynamically with vue cli?如何使用 vue cli 动态更改图像的 src？
【发布时间】：2021-09-27 16:58:31
【问题描述】：

我正在使用 V-for 迭代 Json 来创建元素。这是我的 img 元素

<img v-bind:src="item.logo" alt="" class="card-logo">

item.logo 返回类似“./assets/logos/vector.svg”的值。

Json 为我提供了图片的地址。如果我像../../assets/logos/vector.svg 一样手动输入它，它可以正常工作，如果我复制静态文件夹中的文件并像./static + item.substring(1) 一样使用它，它也可以工作，但是如果我使用：src="item.url" 即使图像不会显示网址是正确的，即使我使用一个函数使它看起来像../../assets/logos/vector.svg。如何将它包含在我的项目中？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

尝试制作方法：

methods: {
  getImgUrl(path) { 
     return require(img);
  }
}

然后在模板中调用该方法：

<img :src="getImgUrl(item.url)" />

【讨论】：

我收到 [Vue 警告]：渲染错误：“错误：找不到模块”。”
但是正确的 url (./assets/logos/blogr.svg) 在返回之前带有 console.log。我想也许我的代码在其他地方有问题。我将项目设置为已创建元素中的道具，然后将网址提供给图像。也许我正在初始化这个没有 url 的新元素，我稍后再给它
嘿伙计，所以图像在文件夹url (./assets/logos/blogr.svg) 和item.url 是？
你只能保存图片名称，例如item.image: blogr然后在方法return require(@/assets/logos/${item.image}.svg)