无法在缩略图中渲染图像，但可以在我的 React 应用程序中获取 id 和名称

Question

我希望我的图像显示为缩略图。在数据文件中，data.imageUrl 与公共文件夹中的文件夹中的图像具有相同的名称和 jpeg 扩展名。 ID 和名称已成功呈现，但图像未呈现。 我可以知道如何解决这个问题，或者可以直接回答我做错了什么吗？如果能够获得有关处理此类问题的更多知识的资源，我们也将非常感激。

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

//I get all the payload from the services.
import { getAll } from '../../services/drugService';
import Thumbnails from '../../components/Thumbnails/Thumbnails';

const initialState = { medicines: [] };
//Reducer
//Function with currentState and action we want to perform
const reducer = (state, action) => {
  switch (action.type) {
    case 'DRUGS_LOADED':
      //Load previous state and overide with new value
      return { ...state, drugs: action.payload };
    default:
      return state;
  }
};

主页组件

const HomePages = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { medicines } = state;

  useEffect(() => {
    getAll().then((drugs) =>
      dispatch({ type: 'DRUGS_LOADED', payload: medicines }),
    );
  }, []);
  return (
    <>
      <Thumbnails drugs={drugs} />
    </>
  );
};

export default HomePages;

缩略图.组件

import React from 'react';
import classes from './thumbnails.module.css';
import { Link } from 'react-router-dom';
const Thumbnails = ({ medicines }) => {
  return (
    <>
      <ul className={classes.list}>
        {medicines.map((drug) => (
          <li key={drug.id}>
            <Link to={`/medicine/${drug.id}`}>
              //Image would not display but alt and id are rendered
              <img
                className={classes.image}
                src={`/medicines/${drug.imageUrl}`}.
                alt={drug.name}
              />
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
};

export default Thumbnails;

我希望我的图像显示为缩略图。在数据文件中，data.imageUrl 与公共文件夹中的文件夹中的图像具有相同的名称。 ID 和名称已成功呈现，但图像未呈现。 我可以知道如何解决这个问题，或者可以直接回答我做错了什么吗？如果能够获得有关处理此类问题的更多知识的资源，我们也将非常感激。

Answer 1

我不确定您如何设置数据文件中图像的名称。但我将为您提供示例代码以及如何从公共文件夹获取图像的示例。

这是我的头像。

这就是我在反应代码中设置“src”属性的方法。

<img src="/backenddeploy.png" />

因此，请确保在数据文件中，

imageUrl

属性设置如下。

const data = [
    {
        imageUrl: "/yourimage.jpeg"
    }
];

希望这会有所帮助。