【Vue】关于开发中本地图片加载失败的经验总结

我的源码：
img或者el-avatar中的src没有提供静态值，而是绑定一个动态变量，如果这个变量的路径是存放在assets里，则图片会加载失败。

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的文件只能直接静态使用，因为一旦静态使用就会默认被加载到项目包里了，所以在检查器中看到的是直接获取到了源文件的二进制