react引入圖片的常用方法和遍歷迴圈圖片
阿新 • • 發佈：2020-08-13
一、react 引入站內圖片的兩種方式 ：
1、通過import 引入圖片
import yesPic from "../assets/images/yes.png"; import noPic from "../assets/images/no.png";使用:<img src={yesPic} alt=""/> 2、在src當中使用require方法
<img src={require("../assets/images/yes.png)} alt=" " >
<img src={require("../assets/images/)+item.name} alt=" " > <img src={"//www.lgstatic.com/"+v.companyLogo}/>
2、模板字串
<img src={`//www.lgstatic.com/${v.companyLogo}`}/>
三、react 遍歷迴圈圖片：
const Contentlist = (props) => {
const { dispatch,list }=props
// console.log(list)
// 柵格顯示內容
return (
<div>
<ul>
{list && list.map((item,index) => {
return(
<li>
<img src={require("../../../assets/skypictures/" + item.skypicture)}></img>
</li>
)
})}
</ul>
</div>
)
}
export default Contentlist