通过img.src添加图片

添加一个img元素,设置content,会发现在IE、safari等浏览器内显示为空白。

一般我们使用img,是通过src来设置的,可以通过react的import图片添加。

<img className="headerMenuEntryImg" src={MenuEntryImg}/>

通过background-image以背景来添加图片

先添加一个img元素:

 <img className="headerMenuEntryImg" />

通过css添加背景:

 .headerMenuEntryImg { height: 24px; width: 24px; background-image: url(../../images/更多.svg); background-size: 100%; background-repeat: no-repeat; background-position: center;
  }

效果:设置图片背景background-image,显示有白边

原因:因为没有给img设置content或者src,浏览器理解为没有图片

解决:设置background-imgage,标签不用img,可以用div等。

这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效,游戏,插件封装,设计模式到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2020最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

学习前端,我们是认真的

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐