如何在 React 页面中引入本地图片

admin 发布于 REACT

引入本地图片问题,在react中引入图片如果是网络图片就直接引入,而如果是本地图片一般都需要放在src目录下(官方推荐放在src,如果在src【非public】外需要重新配置webpack)而放在src里面的图片直接引入是不能获取对应图片,原因是src里面的内容会被webpack打包处理,导致图片不能正常显示!

一、img标签引入图片

(1)require引入图片

<img src={require('../img/iconxx.png')} alt="" />
(2)import导入对应图片
import x1 from '../img/x1.png'
import x2 from '../img/x2.png'
<img src={x1} alt="" />
<img src={x2} alt="" />
(3)将图片资源放在public文件夹下,public文件是,public不会被webpack编译
<img src='logo.png' alt="" />//注意此时图片是相对于public里面的index.html来设置路径的

二、设置背景图片

(1)、设置行距样式

const divStyle = {  
    color: 'blue', 
    background: `url${require("xxx.jpg")}`
};
function bgComponent() {  
    return <div style={divStyle}>intewl!</div>;
}
(2)如果是需要在css中引入对应图片,需要把对应图片放置public下

background: url(../static/login-bg.jpg) no-repeat center center fixed;
background-size: cover;

243浏览量 · 0评论 · 2020-04-23 05:02:08

全部评论  0

注册登录 进行评论

热门专题

更多专题