Vue img src路径与:src不同。

Question

我用Vue。我试着输出一个图像，当我使用src时，它工作得很好，但当我使用:src时，它就不能工作了。

作品

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

不工作

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

我试过的，但没有用

• @第一次在path.
• ~中第一次在path.
• ./第一次在path.
• /第一次在path.
• 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;
}

Answer 2

将src绑定到该方法。

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

在HTML中

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

Answer 3

如果图像变量是文件名

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

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