在反应组件中渲染图像

Question

我在从“./src/img”文件中渲染图像时遇到问题，并且不知道哪里出错了...

我有一个 object，它有一个键“image”，它返回文件名（即：“filename.jpg”）。 如前所述，图像存储在“src”文件夹中的“img”文件夹中。

在我的组件中，我返回这样的图像：

<div className='image'>
    <img src={require(`../img/${details.image}`)} alt={details.name} />
    {
        console.log(details.image)
    }
  </div>

我使用 require function ，（我认为？！^^）并指示文件夹并使用$(details.image)检索图像名称。 正如你所看到的，我正在做一个详细信息图像的 console.log，它不会失败地返回文件名。

当我 go 进入控制台并检查渲染时，我对 alt 没有任何问题，但是 src 参数给了我[object Module]

这就是我对发生的事情以及我在那里做错了什么感到迷茫的地方。

提前致谢

Answer 1

而不是 require 模块，尝试按照creat-react-app文档的建议导入图像。

从'./logo.jpeg'导入标志；

import React from 'react';
import logo from './logo.png'; // <<<< image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;   // <<<<<< Adding to src attribute.
}

export default Header;