react前端显示图片_在react里怎么引用图片
生活随笔
收集整理的這篇文章主要介紹了
react前端显示图片_在react里怎么引用图片
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在react里怎么引用圖片
方法一：import引入
import引入圖片相比引用public文件夾里的圖片會經(jīng)過webpack的處理，如果導(dǎo)入小于10,000字節(jié)的圖像將返回數(shù)據(jù)URI而不是路徑，這樣有利于減少對服務(wù)器的請求數(shù)。這適用于以下文件擴展名：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答疑欄目，歡迎學(xué)習(xí)！
總結(jié)
以上是生活随笔為你收集整理的react前端显示图片_在react里怎么引用图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python字符串去头尾_悉尼大学某蒟蒻
- 下一篇： as3转换为html5,AS3和HTML