时间戳

首页 > 解决方案 > 我收到此错误错误：找不到模块'../list/songQueue.jpg'，使用json-server我正在传递我的图像文件的路径

reactjs - 我收到此错误错误：找不到模块'../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"}
              ]
 }

标签： reactjsjson-server

解决方案

服务器端

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');
});

包.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 钩子）
  • 将数据存储在状态（数组）中（使用useState 挂钩）
  • 使用map()函数显示该数组中的数据
  • 用process.env.PUBLIC_URL指明图片的路径

应用程序.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;

推荐阅读