vue动态显示图片

如果图片直接写死在html或者css里的，webpack会处理这个图片最终的地址（会用到url-loader）

所以如果在初始化的时候使用了相对路径，webpack会编译成两种形式，绝对路径或者base64字符串

实例：

 <img src="../assets/imgs/1.jpg" alt="">

image.png

绝对路径

图片以绝对路径（以/开头的路径就是绝对路径，/指根目录，根目录自爱本机就是指磁盘，在github上就是仓库的根目录）进行查找，图片的目录为/static/img,但是我们查看static目录下并没有找到img目录，那么路径如何来？

对项目运行npm run build，在dist目录下面可以找到该图片，所以， webpack打包后，会把静态资源放在dist目录下，我们的网站实际上是以dist目录作为根目录，并由此加载该目录下的资源。

当vue动态定义图片路径的时候，url-loader是无法探测到图片地址的。我们build后发现，图片不会打包输出到dist目录下（webpack是按需加载的）

如何解决：

1.访问绝对路径

把图片放到静态资源目录中（build会将static目录的we年或者文件夹放到dist目录中），并用/static绝对路径访问

 image:'/static/imgs/1.jpg'

2.使用require

如果想在不调整目录结构的情况下读取图片，还可以使用require
缺点：由于commonJs只允许使用字符串字面量，所以不利于组件化，灵活性差

image:require('../assets/imgs/2.jpg')

3.使用import

 import userPath from '../assets/user.png'
    export default{
        data(){
          return {
              src:userPath 
          }
        }
    }