我的源码:
img或者el-avatar中的src没有提供静态值,而是绑定一个动态变量,如果这个变量的路径是存放在assets里,则图片会加载失败。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/950fe29644440ba0bb39fccbd73dd0a8.png)
1. 图片存放在assets
如果图片存放在assets里,则只能指定静态路径。
- 指定静态路径
能够成功加载:
查看一下图片获取,是直接加载一个二进制文件
- 指定动态路径
图片直接加载失败
查看图片获取方式,采用的是url拼接的方式,很明显,不可能找到这个地方,因为webpack打包后的项目就没有assets这个文件夹,只有static文件夹,npm run dev打包运行后只会去解析static目录,而不会解析assets目录。
2. 图片存放在static中
直接使用相对路径访问
能够直接获取
图片的来源也是合理的,因为npm打包后的项目里会有static文件夹。
3. 其他需要注意的点
1.标签内不可以使用el表达式<img :src="{{ scope.row.photo }}" />这样是错的
2.使用require()内部只能传输静态字符串<img :src="require('@/assets/xxx.png')"/>这样是对的
,如果传输一个变量则是错的。
3.总结:如果需要一个标签动态展示图片,放在static不要用assets目录
原因是asset的文件会被直接打包到项目中,而static的文件在打包后会独立成为一个文件夹,如果动态引入某文件,默认是采取打包后路径访问的方式,因此只能访问打包后还存在的static文件夹。asset的文件只能直接静态使用,因为一旦静态使用就会默认被加载到项目包里了,所以在检查器中看到的是直接获取到了源文件的二进制