vue图片存放在public目录和src/assets目录下的区别

一、public目录

• 路径设置时无需添加 public/，默认加载 public 文件夹下的图片。
• 不需要使用 require，否则就变成在 src/assets 文件夹寻找。
• 系统编译后，可替换图片；
• public文件夹下的文件会原封不动的打包到dist中

this.imgUrl = 'images/test.jpg';
// 或
this.imgUrl = './images/test.jpg';

public官方文档
其中“你有上千个图片，需要动态引用它们的路径”的解释说明：

1. 性能优化：将图片放在 public 文件夹中，直接通过 URL 访问，不需要通过 Webpack 处理和打包，减少了构建时间和内存消耗。
2. 简化路径管理：所有图片文件保存在一个固定位置，路径简单且易于管理，避免了在代码中频繁引用和导入图片路径。
3. 动态加载：可以通过简单的路径拼接方式动态加载图片，而不需要在编译时提前引入。

例子：一个图片库应用，用户可以上传上千张图片，这些图片会被保存在服务器上的某个目录中，前端需要根据用户的操作动态加载这些图片。在这种情况下，图片可以放在 public/images 目录中，通过 URL 动态访问，例如 http://example.com/images/image1.jpg。

二、src/assets目录

• 需要使用 require，运行时就加载；
• 系统编译后，不能替换，因为被内部编译管理；
• src文件夹下的assets文件夹用于放置全部组件共用的静态资源

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

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

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

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

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

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

总结

使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。

如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中

拓展

1.在css中使用src的别名@需要加上~

background-image: url(~@/assets/images/icons.png)

2.Vue 中动态引入图片为什么要是 require
因为动态添加的src，编译过后的文件地址和被编译过后的资源文件地址不一致，从而无法正确引入资源。而使用require，返回的就是资源文件被编译后的文件地址，从而可以正确的引入资源