vue - 图片存放路径`public目录、src/assets目录下）的区别、访问方式

public 目录下项目需要使用的静态资源，有更新动态显示的需求。

src/assets 目录下适合存放项目中所必须的图标，属于代码的一部

图片存放在这两个位置时的访问方法：

1. public目录下：使用 / 开头的绝对路径访问

   若：/public/images/a.jpg 访问： <img src="/images/a.jpg">

   若：/public/images/a/b/c/d.jpg 访问： <img src="/images/a/b/c/d.jpg">

2. src/assets目录下：使用相对路径访问

   若： /src/assets/a.jpg 访问：<img src="../assets/a.jpg">                 <img src="@/assets/a.jpg">   @代表src目录

检查元素发现，asset下的图片访问路径被篡改成了：  /img/001.923456aefr4trwt44.png

原因是，webpack在编译打包过程中，将会把src下的所有引用的资源当做模块进行处理。图片也不例外。脚手架默认会将图片直接打包到输出项目目录下的/img文件夹中，为了防止命名冲突，还为每张图片重命名。最后将源代码中的src路径进行了篡改。使得页面可以正常显示该图片。

再次webpack打包时会对这些占用空间足够小的小图标进行优化。将会把一些小图标直接转成base64图片编码，为img的src直接赋值。降低浏览器访问小图片的频率。优化网页访问性能。

assets下的动态路径的设置方式：

​​​​​​​<img :src="`../assets/a.jpg`">

一旦img的src是动态属性，那么webpack将不会对该路径进行篡改，会原封不动的编译该标签。这样，浏览器在加载图片时，就会去找assets，将会找不到该图片。

应该如下设置assets下的动态路径：

<img :src="require('../assets/a.jpg')">

将该路径经过require处理后，会把图片当做模块重命名后放到项目的/img/文件夹下，并且将src修改为可以访问到的/img/xxx.xx.jpg文件路径。正常显示该图片。