react引入圖片的常用方法和遍歷循環圖片

一、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=" " >

二、react 引入網絡圖片的方式 ：

    1、通過+拼接

　<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