上传的图像文件夹中的图像未显示在网页网格中

Question

我正在尝试使用 reactjs 制作记忆配对游戏。我的组件和其他文件在 src 文件夹中。 index.html、style.css 和图像文件夹（img，所有图像 img folders are inside public folder 显示在网格上） public folder.All img 文件夹中的图像是 png。

我必须在网格中显示这些图像，因此我为容器制作了一个用于单个图像的 Card 组件card component and a cards component。 usestate 和 arraymap 函数用于显示这些图像。

当我第一次尝试只使用字符串 'card' 而不是将所有图像都放入文件夹时，它运行良好并且在所有网格中显示 'card'。然后我导入了图像文件夹，它仍然显示网格及其 CSS 属性，但图像没有加载到显示器中。我改变了图像的数量，相对于此，网格的数量正在改变，但图像不显示。

container 是卡片组件中的 class，card.js 中的卡片 class。我不知道我在这些代码中遗漏了什么。

Answer 1

这应该是卡片组件（见道具而不是物品）作为函数参数。

export default function Card(props) {
  return (
    <div className="card">
      <img src={props.item.img} alt="" />
    </div>
  );
}

下次请以文本而非图片的形式分享代码。希望这对您有所帮助。

上传的图像文件夹中的图像未显示在网页网格中

Images are not displaying in webpage grid from uploaded image folder

javascript

css

array-map

reactjs

use-state