react前端显示图片_在react里怎么引用图片

在react里怎么引用图片

方法一：import引入

import引入图片相比引用public文件夹里的图片会经过webpack的处理，如果导入小于10,000字节的图像将返回数据URI而不是路径，这样有利于减少对服务器的请求数。这适用于以下文件扩展名：bmp，gif，jpg，jpeg和png。SVG文件被排除在外。import Pic from './assets/WechatIMG316.jpeg';

const RenderImage = ()=>{

return (

)

}

方法二：require方法

require里只能写字符串，不能写变量。const RenderImage = ()=>{

return (

)

}

背景图片引入的方法class Wrap extends React.Component{

render(){

let styleObject = {

width:"100px",

height:"100px",

backgroundImage:`url(${require('./assets/WechatIMG316.jpeg')})`,

backgroundSize:'cover'

}

return (

)

}

}

本文来自React答疑栏目，欢迎学习！