我正在使用Next.js styled-components TypeScript。我想使用background-image: url()，我從src檔案夾中的assets檔案夾匯入圖片。在網路選項卡中，當我尋找圖片時，它在狀態中說：
。(failed)net::ERR_UNKNOWN_URL_SCHEME，而網址是 src:/_next/static/image/public/right.e158775f9c1cf296e36177bf86a5ced.svg；height:32px；width:32px；它不顯示影像。
資產檔案夾存在于
/src/assets/left.svg。如果我在
index.tsx檔案中匯入相同的圖片，并在Image組件中渲染它，它可以正常作業。// styles.tsx. 匯入來自 'styled-components'的樣式。 import Left from ' ././assets/left.svg'; import Right from ' ././assets/right.svg'; export const SwiperWrapper = styled.div`。 margin-top: 2.5rem; 位置：相對。 .swiper-position { position: static !important; } .swiper-button-next:after, .swiper-button-prev:after { 內容。''; } .swiper-button-prev { background-image: url(${Left}) 。 背景重復: 無重復。 背景尺寸：100%自動。 背景-位置：中心。 -webkit-tap-highlight-color: transparent; 頂部。100%; } .swiper-button-next { background-image: url(${Right}) 。 背景重復: 無重復。 背景尺寸：100%自動。 背景-位置: 中心。 -webkit-tap-highlight-color: 透明。 } `。uj5u.com熱心網友回復：
這是因為在Nextjs中，靜態檔案是從根目錄下的 "公共 "檔案夾中提供的。我建議你將圖片存盤在這個檔案夾中，并以"/"來參考它們
。eg
background-image: url('/Right');轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/333981.html
標籤：
上一篇：將字串轉換為Arduino的字符
下一篇：當我們從FireStore獲取資料時，tableview.reloaddata()在Dispatchqueue.main.sync之外仍然有效。