导入的图像（然后存储在对象中）不呈现（反应）

Question

我想导入图像，将它们存储在一个对象数组中，然后使用映射函数循环遍历它们。我在 VSCode 中没有收到任何错误，但图像未呈现。当我检查时，我确实看到图像没有按应有的方式读取。希望可以有人帮帮我。谢谢！

图像导入：

import folder from './assets/icons/folder.svg';
import about from './assets/icons/about.svg';
import code from './assets/icons/code.svg';
import contact from './assets/icons/contact.svg';
import photos from './assets/icons/photos.svg';

export { folder }; 
export { about }; 
export { code }; 
export { contact }; 
export { photos };

导入组件：

import { React, useState } from "react";
import "./home.scss";
import { folder, about, code, contact, photos } from '../imageimport';

function Home() {
  const [buttons, setButtons] = useState([
    {
      icon: {folder},
      title: "New Folder",
    },
    {
      icon: {photos},
      title: "Pics",
    },
    {
      icon: {code},
      title: "Web Dev",
    },
    {
      icon: {contact},
      title: "Contact",
    },
    {
      icon: {about},
      title: "About",
    }
  ]);

  return (
    <div className="home">
      {buttons.map((item, i) => (
        <div className="home_items">
            <img className="home_items-icon" src={item.icon}></img>
            {item.title}</div>
      ))}
    </div>
  );
}

export default Home;

使用 DevTools 检查

<div class="desktop_items"><img class="desktop_items-icon" src="[object Object]">New Folder</div>

Answer 1

您只需从 icon: {folder} 更改为 icon: folder

导入的图像（然后存储在对象中）不呈现（反应）

Imported image (then stored in object) does not render (react)

javascript

variables

import

reactjs

react-hooks