image - 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 -->

由于某些原因，它们差异很大。

我该如何解决？

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