我收到此错误错误：无法找到模块 '../list/songQueue.jpg' ，使用 json-server 我正在传递我的图像文件的路径

如何解决我收到此错误错误：无法找到模块 '../list/songQueue.jpg' ，使用 json-server 我正在传递我的图像文件的路径

 [enter image description here][1]

我的一个组件有这个

<img className='list-image' src={require(props.list.imgSrc)} ></img>

我的 db.json 文件

{
  "songlist": [
               {id:1,"name":"xyz","imgSrc":"../list/songQueue.jpg"}
              ]
 }

解决方法

服务器端

db.json

{
  "songlist": [
    {
      "id": "01","name": "abc","imgSrc": "/images/songQueue.jpg"
    },{
      "id": "02","name": "def","imgSrc": "/images/songQueue2.jpg"
    }
  ]
}

index.js

const jsonServer = require('json-server');
const server = jsonServer.create();
const path = require('path');
const router = jsonServer.router(path.join(__dirname,'db.json'));
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(router);
server.listen(3333,() => {
  console.log('JSON Server is running on port 3333');
});

package.json

{
  "name": "react-json-server","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","start": "nodemon index.js"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "json-server": "^0.16.3"
  },"devDependencies": {
    "nodemon": "^2.0.7"
  }
}

---

客户端

• 在公共场所创建一个“图像”文件夹，并将所有图像放入其中。
• 使用fetch()函数获取数据（当组件渲染时+useEffect hook）
• 将数据存储在一个状态（数组）中（使用useState hook）
• 使用ma​​p()函数
显示这个数组中的数据
• 使用 process.env.PUBLIC_URL
指示图像的路径

App.js

import React,{useState,useEffect} from 'react';

function App() {
  const [data,setData] = useState([]);

  const getData = async () => {
    const response = await fetch("http://localhost:3333/songlist"); // server port (3333)
    response
      .json()
      .then(response => setData(response))
      .catch(error => console.log(error));
  }

  useEffect(() => {
    getData();
  },[]);


  return (
    <div>
      {
        data.map((song) => (
          <img className='list-image' alt='' key={song.id} src={process.env.PUBLIC_URL + song.imgSrc} />
        ))
      }
    </div>
  );
}

export default App;