Question

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

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

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

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

我按预期使用 require 函数（我认为是？！^^）并指示文件夹并使用 $(details.image) 检索图像名称。正如你所看到的，我正在做一个详细信息图像的 console.log，它会准确无误地返回文件名。

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

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

提前致谢

Answer 1

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

<块引用>

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

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;

在反应组件中渲染图像

1 个答案: