導入的圖像（然后存儲在對象中）不渲染（反應）

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