欢迎来到 Only↹追梦 的博客园,您的关注和点赞是我的动力感谢您的支持!
jQuery火箭图标返回顶部代码 - 站长素材

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

  

 
 
 
posted @ 2020-08-13 17:48  Only↹追梦  阅读(1394)  评论(0编辑  收藏  举报
/*导航*/