• 欢迎大家分享资料!前往留言板评论即可!

React中引入静态图片与不显示的问题

合宙 模组资料网 2年前 (2021-05-15) 415次浏览 0个评论 扫描二维码

在普通的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 />

修改后果然解决了图片不显示的问题,后续如果出现其他问题会继续追加的,希望小伙伴们有建议可以提出我们互相学习哦~


喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址