我有一個檔案，我認為是我的資料檔案，我用它來填充 reactjs 滑塊。因此，不要復制和粘貼 5 個相同的組件。
問題是，我還傳遞了一個影像，但當我的影像是本地影像時，我無法讓它顯示出來。
<Slider {...settings}>
{school.schoolData.map((schoolData, index) => (
<a href={schoolData.Register} target="_blank">
{" "}
<div
className="contentContainer"
style={{ textAlign: "center" }}
>
<img
src={schoolData.Logo}
style={{ width: "150px", textAlign: "center" }}
/>
</div>
</a>
))}
</Slider>
這是我用于資料的檔案。
import testimage from "../../../../public/exchanges/testimage.png";
export default {
schoolData: [
{
id: 1,
Register: serviceIcon1,
title: "Price",
body: "The highly the not having with lively Our up with.",
Link:"www.google.com",
// Logo: "https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png",
Logo:testimage
},
我使用了公共檔案夾，資產檔案夾，嘗試匯入影像但沒有任何效果。但是，如果我只是傳遞一個網路鏈接，它就可以作業。如果我能在使用本地影像時得到幫助，我將不勝感激。
問候
更多資訊
icon: serviceIcon1,是一個圖示，為了讓它作業，我必須說，src={schoolData.Logo.src} 但如果我使用.src影像，它會出現錯誤
uj5u.com熱心網友回復：
錯誤是您定義影像地址的地方。請從 testImage 中移除花括號。它應該是
標志：testImage
因為當你放大括號時，它現在變成了一個物件，但是< img />標簽需要字串作為源。所以基本上你的資料看起來像這樣。
import testimage from "../../../../public/exchanges/testimage.png";
export default {
schoolData: [
{
id: 1,
Register: serviceIcon1,
title: "Price",
body: "The highly the not having with lively Our up with.",
Link:"www.google.com",
Logo: testimage
},
您也可以在此處查看我的 CodeSandbox 示例
額外提示：當您使用公共檔案夾時，您不需要放置大量
“../../../../public/exchange/etc”
. 您可以像這樣直接從任何地方訪問公共檔案夾
“/公共/交易所/等”
uj5u.com熱心網友回復：
不要將影像放入公用檔案夾。相反，將 src 檔案夾用于所有資產和腳本。
uj5u.com熱心網友回復：
解決了，我不得不說 Logo:testimage.src
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345874.html
標籤：反应
上一篇：呈現此功能組件的更好方法是什么？
下一篇：React頁面不會停止重繪