【Vue】Vue小项目记录3：本地静态图片的路径问题

本地图片一般引用：

一般我们在html中或者vue组件文件中引用图片方式：

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

此时，用webpack打包后，我们需要加载的图片可以正常显示，也可以看到图片路径已经被webpack编译。

本地图片动态引用：

根据动态绑定路径引用本地图片：<img :src="avatar" class='avatar' alt="头像">，图片无法正常显示，经过查看，原因是webpack为对图片进行编译。

下面是探讨解决办法：

1. 使用require引入图片

使用require 将图片当成模块先引进来，再绑定

export default{
	data(){
            avatar:require('../assets/img1.png')
     }
}

这种情况下，图片可以正常显示。如果需要使用的本地图片较少，这种方法还可以接受；如果有几十个图片呢?

export default{
	data(){
		linkerImg:[{
                avatar:require('../assets/img1.png')
            },
            ......
            {
                avatar:require('../assets/img50.png')
            }
     }
}

这样做的话，模块化差，可读性差 。

2.本地图片动态绑定img的src属性

• 第一步：将静态图片放在和src同级的static目录文件夹下
  
• 第二步：src下面建立一个json文件夹里面放置静态的json数据，用来存储图片路径
  
• 第三步：你的路径可以写成自然的’…/…/static/img/xxx.png’ 也可以按照红框中的写法（这种写法对应的是编译后文件的目录）
  

这样子按照平常的动态绑定src属性你的图片路径在开发模式下和生产模式下的图片资源路径都是不会出问题的

小问题

这种方式引用图片是不会被url等加载器处理的

上面的红框都是这种方式，最下面的红框是用require的方式将图片引进来的（被当成模块被url-loader处理，加入了hash值）
这个需要看网站本身的性质和具体业务以及个人取舍了，当然也可以混合着用，灵活一点没有死的处理方法！