我將我的網站內容存盤在 data.js 檔案中，并使用道具將此內容傳遞給我的組件。一切正常。但我的 .svg 檔案不會顯示。但是，當我將影像的擴展名更改為 .jpg 或 .png 時，它可以作業。我關心的是.svg。
這是我的 data.js 檔案
tails: [
{
header: "Brand Recognition",
description:
"Boost your brand recognition with each click. Generic links don't mean a thing. Branded links help instil confidence in your content.",
image: require("../assets/img/icon-brand-recognition.svg"),
},
{
header: "Detailed Records",
description:
"Gain insights into who is clicking your links.Knowing when and where people engage with your content helps inform better decisions.",
image: require("../assets/img/icon-detailed-records.svg"),
},
{
header: "Fully Customizable",
description:
"Improve brand awareness and content discoverability through customizable links,supercharging audience engagement.",
image: "../assets/img/icon-fully-customizable.svg",
},
],
};
在 ServiceTile 組件中，我使用道具來傳遞資料：
return (
<Wrapper>
<CardBody>
<Circle>
<img src={image} alt="Icon" />
</Circle>
<div id="content">
<h3>{header}</h3>
<p>{description}</p>
</div>
</CardBody>
</Wrapper>
);
}
最后，在我的 App.js 中，我使用地圖功能來渲染組件：
<ServiceTile
header={item.header}
description={item.description}
image={item.image}
/>
))}
問題是什么？有沒有其他方法可以做到這一點？我也在使用樣式組件。
uj5u.com熱心網友回復：
這是我會使用的另一種方法。
制作一個將路徑作為道具的 svg 組件
const SvgIcon = ({ path }) => {
return (
<svg viewBox="0 0 24 24">
<path d={path} />
</svg>
);
};
export default SvgIcon;
并使用您的 svg 路徑（稱為 d）更改 data.js 中的資料
tails: [
{
header: "Fully Customizable",
description: "Improve brand.....",
image: "m5.214 14.522s4.505 4.502 6.259 6.255c.146.147.338......",
},
],
};
然后你可以用路徑呼叫這個 SvgIcon 組件。希望能幫助到你
uj5u.com熱心網友回復：
請移動公共檔案夾中的 SVG 檔案，路徑：Project => public\static\123.svg
{
header: 'Brand Recognition',
description:
"Boost your brand recognition with each click. Generic links don't mean a thing. Branded links help instil confidence in your content.",
image: '/static/123.svg'
},
uj5u.com熱心網友回復：
感謝您的任何回答。我偶然地解決了這個問題，幾乎沒有改變代碼。在我傳遞道具的地方，我添加了.default
<ServiceTile
header={item.header}
description={item.description}
image={item.image.default}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484710.html
標籤：javascript css 反应 网页包
上一篇：在React中使用web3有錯誤：webpack<5usedtoincludepolyfillsfornode.jscoremodulesbydefault