i get this error Error: Cannot find module '../list/songQueue.jpg' ,using json-server i am passing path of my image file

Question

 [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"}
              ]
 }

Answer 1

服务器端

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"
  }
}

客户端

在 public 中创建一个“图像”文件夹，并将所有图像放入其中。
用fetch()函数获取数据(+useEffect hook当组件rendering)
将数据存储在状态（数组）中（使用useState hook）
用map()函数[=54=显示来自这个数组的数据 ]
用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;

i get this error Error: Cannot find module '../list/songQueue.jpg' ,using json-server i am passing path of my image file

i get this error Error: Cannot find module '../list/songQueue.jpg' ,using json-server i am passing path of my image file

reactjs

json-server