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