无法在 Vue 中加载图像

Question

无法使用 Vue 加载简单的图像文件（使用扩展名为 .vue 的单文件组件）。这是我放在模板中的代码：

<div><a href=""><img :src="london.jpg"></a></div>

我做错了什么？

Answer 1

我习惯把所有图片都放到public文件夹中，所以我不需要webpack来加载图片。

图片的路径是'/public/assets/img/london.jpg'

所以，在任何 Vue 组件中，我都可以使用

<div>
   <a href="#">
     <img src="/assets/img/london.jpg" alt="london"/>
   </a>
</div>

Answer 2

你也可以直接在你的模板中要求。

<div>
    <a href="#">
        <img :src="require(`@/assets/img/london.jpg`)"/>
    </a>
</div>

请注意，@ 是您的 src/ 文件夹。

Answer 3

绑定属性时，模型或数据类型必须正确。

要绑定:src，必须是字符串或数据模型。

<div> <a href=""><img :src="'london.jpg'"></a></div>

或

<div> <a href=""><img src="img"></a></div>

或

export default {
  data () {
    return {
      img: require('london.jpg')
    }
  }
}

<div> <a href=""><img :src="img"></a></div>