React：通過svg影像串列映射-有解無憂

我正在嘗試映射 svg 影像串列并顯示與 svg 影像相對應的足夠描述。

index.js

import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg";
import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg";
import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg";


const data = [
  {
    id: `1`,
    title: "Coming soon",
    description:'',
    img: Pic1,
  },
  {
    id: `2`,
    title: "Coming soon",
    description:'',
    img: Pic2,
  },
  {
    id: `3`,
    tile: "Coming soon",
    description:'',
    img: Pic3,
  },
]

function Test() {
  return (
{data.map(({ id, title,description, img }) => (
                  <div key={id} className="guest--item swiper-slide">
                    <div>
                    <img key={id} src={img} alt='mySvgImage' />
                      <h1>{title}</h1>
                      <h2>{description}</h2>
                      </div>
                  </div>
                ))}
)}

目前，當我檢查我的反應網站時，我只能看到 mySvgImage，這是 alt 3 次，看不到實際影像

uj5u.com熱心網友回復：

您正在匯入SVG's，React Component因此您應該將它們用作組件本身。

在您的代碼中，您將React Component（作為 React 組件匯入的 SVG）作為src屬性傳遞給<img>無效的標簽。

import React from "react";
import ReactDOM from "react-dom";

import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg";
import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg";
import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg";

const data = [
  {
    id: `1`,
    title: "Coming soon",
    description: "",
    Image: Pic1
  },
  {
    id: `2`,
    title: "Coming soon",
    description: "",
    Image: Pic2
  },
  {
    id: `3`,
    tile: "Coming soon",
    description: "",
    Image: Pic3
  }
];

function Test() {
  return (
    <>
      {data.map(({ id, title, description, Image }) => (
        <div key={id}>
          <div>
            <Image />  {/* Use Image as Component */}
            <h1>{title}</h1>
            <h2>{description}</h2>
          </div>
        </div>
      ))}
    </>
  );
}

uj5u.com熱心網友回復：

因為您以錯誤的方式匯入影像。我制作了這個與您的示例完全相同的作業 CodeSandbox。檢查我是如何匯入影像的，它作業得很好。代碼沙盒

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441121.html

標籤：javascript 反应 svg

上一篇：在圓形進度條CSS中標記閾值指示符

下一篇：SVG網格和文本