优化项目的时候，将之前写死的图片，通过后台接口动态读取。遇到了一个问题，即之前的图片都是base64的，通过动态获取后，图片没有被base64，导致图片不显示。

出现问题的过程

之前的HTML片段是这样的，如下图：

我通过修改图片名称跟后台接口对应上，将代码改成了下图所示：

就遇到了所说的问题，即图片不再base64。（图片base64的前提是webpack中用url-loader配置了）。

原因

由于webpack在静态编译阶段就已经将图片打包了，上面这样的写法使得图片路径在项目运行时才拼接完毕，会导致图片404。另外在js中添加的图片也会有这种问题。

解决方式

1、接口修改，让接口中直接返回对应的图片，这样请求的就是具体的网络地址。

2、前端自己处理下，可以用import或者require导入图片

import和require的区别在于，import必须写在代码开头，如果有10张图片，就要import10次；而require可以写在代码块中，用循环来完成图片引入。如下图

扩展

assets和static的区别

assets 存放的内容，会被webpack编译

static 存放的内容，不走编译，直接到打包里面，所以这个里面经常放第三方的内容

在vue3.0以上版本，用public代替了static，但是index.html放到了public 里面，public里面除了index.html外其他都不进行编译。