Vue img src 路径与 :src 不同答案

【问题标题】：Vue img src path does not work the same as :srcVue img src 路径与 :src 不同
【发布时间】：2021-02-12 07:08:54
【问题描述】：

我使用 Vue。我尝试输出图像，当我使用 src 时效果很好，但在使用 :src 时效果不佳。

作品

<img src="../assets/image.png" />

不工作

<img :src="`../assets/${image}.png`" />

我试过了，但没用

@ 路径中的第一个。
~ 路径中的第一位。
./ 路径中的第一位。
/ 路径中的第一个。
require 但如果图像无法加载，它会引发错误。我更喜欢原生的损坏的图像图标，它不会破坏脚本。

我的输出

变量image 包含文件名，在本例中为image。

两个版本的输出如下：

<img src="../assets/image.png" data-v-469af010=""> <!-- src -->
<img src="/img/image.f556f8c5.png" data-v-469af010=""> <!-- :src -->

由于某种原因，它们相差很大。

我该如何解决？

【问题讨论】：

图片变量从何而来？你得到哪个错误？您的代码应该可以工作。
@BülentAkgül 我现在将输出添加到我的问题中。
这个是有线的，不知道f556f8c5是哪来的。我不明白基本路径是如何改变的。首先，图像变量来自哪里（v-for、数据对象、方法、计算属性、道具、存储）？其次，代替img标签，添加一个{{image}}，看看真正的价值是什么。
你使用的是哪个打包工具 vite 或 vue cli ...？
@BoussadjraBrahim 是的，Vue CLI，它对srcversion 做了一些神奇的事情，如输出所示，更改路径并添加一些哈希 id。

标签： image vue.js path vuejs3

【解决方案1】：

将 src 绑定到方法。

getImgUrl(image) {
    return `../assets/${image}.png`
  }

在 HTML 中

<img :src="getImgUrl(image)" />

【讨论】：

我遇到了同样的问题，与没有绑定时完全相同的 src 路径。
如果你使用我的答案，你能告诉我错误是什么吗？

【解决方案2】：

如果图像变量是文件名

<img :src="'../assets/'+image" />

你不应该在模板中使用 $。

【讨论】：

那是旧代码。在 ES5+ 中我们可以使用我所做的。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案3】：

我用这个解决了这个问题：

<img :src="cover(url)" /> // I call a method cover.

// Method cover
cover(url) {
    if (url !== ''){ // You can check any matching expression.
         try {
             url = require('@/assets/img/' + url)
         } catch (e) {
             url = require('@/assets/img/default.jpg'); // I used a default image. 
         }
     }
     else
         url = require('@/assets/img/default.jpg'); // Default image. 
     return url;
}

【讨论】：