Vue中的img src路径与:src不同，为什么？

Question

我使用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 -->

由于某些原因，它们之间存在很大的区别。

我该如何解决这个问题？

- Jens Törnell

---

图片变量从哪里来？你遇到了什么错误？你的代码应该可以工作。 - Bulent

@BülentAkgül 我现在已经将输出添加到我的问题中了。 - Jens Törnell

这很奇怪，我不知道f556f8c5从哪里来。我不明白基础路径是如何改变的。首先，image变量来自哪里（v-for、数据对象、方法、计算属性、prop、store）？其次，不要使用img标签，而是添加<span>{{image}}</span>并查看实际值。 - Bulent

你正在使用哪个打包工具，Vite 还是 Vue CLI ...？ - Boussadjra Brahim

@BoussadjraBrahim 是的，Vue CLI确实可以对src版本进行一些神奇的操作，可以改变其路径并添加一些哈希ID。 - Jens Törnell

Answer 1

我用以下代码解决了这个问题：

<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;
}

- Gbenankpon

Answer 2

如果图像变量是文件名

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

在模板中不应使用 $ 符号。

- ArtSur

---

那是旧代码。在ES5+中，我们可以使用我所做的。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals - Jens Törnell

Answer 3

将 src 绑定到该方法。

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

在HTML中

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

- wangdev87

---

我遇到了同样的问题，和没有捆绑时一模一样的源路径。 - Jens Törnell

如果您使用我的答案，能否告诉我出现了什么错误？ - wangdev87