在普通的html页面中,引入图片是这样写的<img src="@/assets/logo.png"/>
但是react不支持这种写法,react的常用图片引入方法如下两种:
1.在文件顶部引入,内部使用
improt logo from '@/assets/logo.png';
……
<img src={logo} />
2.在文件内部使用处引入
<img src={require('@/assets/logo.png')} />
问题
而我在编写移动端的时候发现 使用第二种引用方式,所有的图片均不显示,查了一下相关资料,因为require是动态加载,而import是静态编译,要解决这个问题有两种方式,第一是换成第一种方式,一劳永逸,要么就是在第二种加入.default
,修改代码如下
<img src={require('@/assets/logo.png')}.default />
修改后果然解决了图片不显示的问题,后续如果出现其他问题会继续追加的,希望小伙伴们有建议可以提出我们互相学习哦~