vue脚手架引入图片资源的几种方式

方式1：使用base64编码加载

使用require或者import。

<img :src="imgUrl" alt="" />
 
<script>
import Logo from '@/assets/logo.png'
export default {
  data() {
    return {
      // imgUrl: require('@/assets/logo.png'),
      imgUrl: Logo,
    }
  },
}
</script>

方式2：图片放在与src同级的public目录下

 <img src="/1.png" alt="" />

文件结构：

方式3: 使用vue脚手架提供的路径别名

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