【Vue】Vue Cli 项目中通过 require 引入静态图片路径的解释

关于 vue-cli 项目 中静态图片通过 require 引入的解释

需求：如何 components 里面的 index.vue 怎样能把 assets 里面的图片拿出来。

1. 在 img 标签中直接写上路径

<img src="../assets/logo.png" alt="" />

2. 使用变量接收静态图片路径（必须使用 require）

<img :src="imgSrc" alt="" />

data() {
    return {
      // Vue中js部分引入静态图片，必须使用require引入，否则无法正常显示
      imgSrc:require('../assets/logo.png')

      // 不可以使用以下写法
      // imgSrc:'../assets/logo.png'
    }
  }

总结

• 经过验证，若需要通过变量接收静态图片路径，则必须使用 require 引入，原因是因为：在标签中直接写上图片路径，路径会转为 base64，但是如果通过变量设置静态路径，则不会转为 base64，仍然显示变量值对应的路径，故图片无法正常显示。

• 正常业务开发中使用变量 require 引用静态图片路径的场景并不多，更多的则是静态图片直接在标签中引入或者直接引用网络路径来展示图片。