无法在Vue中加载图片

Question

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

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

我在做什么错了？

Answer 1

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

要绑定：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>

Answer 2

我习惯将所有图像放入公用文件夹，因此不需要Webpack来加载图像。

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

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

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

Answer 3

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

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

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