jsx 里面 图片引入问题 ,图片加载失败

我用require引入字符串路径

<img src={require("../../assets/img/icon-coffee.png")} alt="" />
            <img src="../../assets/img/icon-coffee.png" alt="" />

浏览器dom显示为

<img src="[object Module]" alt=""><img src="../../assets/img/icon-coffee.png" alt="">

我用列表循环

 const Navitem = () => {
      let list = this.state.navlist.map(item => {
        return (
          <div className="items" key={item.id}>
            <img src={item.img} alt="" />
            <p>{item.name}</p>
            <p>{item.tip}</p>
          </div>
        )
      });
      console.log(list)
      return list
    }

渲染出来是这样

<div class="items">
    <img src=" ../../assets/img/icon-garden.png " alt="">
    <p>果园</p>
    <p></p>    
</div>
<div class="items">
    <img src=" ../../assets/img/icon-jy.png " alt="">
    <p>加油</p>
    <p>加油..</p>
</div>
<div class="items">
    <img src=" ../../assets/img/icon-didi.png " alt="">
    <p>滴滴出行</p>
    <p>打车</p>
</div>
<div class="items">
    <img src=" ../../assets/img/icon-movie.png " alt="">
    <p>电影奶茶</p>
    <p></p>
</div>
//......

页面显示均为

,使用css作为背景可以正常显示

你可以试着用require或者import引入一个图片。

const imgSrc=require("../img")

<img src={imgSrc}/>


或者直接
<img src={require("../../img")}/>

经测试，用require不能正常显示，需要使用import，具体示例如下：

import img from "./assets/img/mao.jpg";
function App() {
  return (
    <div className="App">
      <img src={img} alt="" />
    </div>
  );
}

export default App;