react前端显示图片_在react里怎么引用图片
生活随笔
收集整理的這篇文章主要介紹了
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答疑欄目，歡迎學習！
總結
以上是生活随笔為你收集整理的react前端显示图片_在react里怎么引用图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python字符串去头尾_悉尼大学某蒟蒻
- 下一篇： rust模组服如何切换标准服_送给玩模组