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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐