import styled from 'styled-components';
import bannerImage from '../img/bannerImage.jpg';
console.log(bannerImage);
const StyledBanner = styled.div`
margin-top: 55px;
width: 100%;
height: 20px;
background-color: red;
`;
function Banner() {
return (
<StyledBanner>
{/* <img src={`http://github.com/someprofile.png`} /> */}
<img src={require("../img/bannerImage.jpg")} />
<img src={bannerImage} />
</StyledBanner>
);
};
export default Banner;
我有這個 React 組件，我試圖回傳一個本地影像，但是這個影像永遠不會加載，它顯示影像在那里但它總是壞了。我嘗試使用 require 方法以及匯入，但沒有任何效果。
當它是外部影像時它作業正常，只有當它是本地時它才不起作用。
你能告訴我如何糾正這個問題嗎？
由此產生的最后一個元素是 DIV，那里的那 2 張影像顯示為損壞的影像，但如果我將 src 更改為在線圖片，它就可以正常作業。
<div class="sc-eDvSVe YFPxO">
<img src="[object Module]">
<img src="[object Object]">
</div>
uj5u.com熱心網友回復：
我認為修復將是使用require("../img/bannerImage.jpg").default，因為require回傳一個具有default您必須訪問的屬性的物件。
我的一個舊專案的示例：
如果我這樣設定我的狀態：
setProfileImg(require("../images/" res.data.profileImg));
它具有此物件的值：
{
"default": "/static/media/1640086164286.e03de477.png"
}
所以通過使用.default我訪問我想要的實際影像路徑。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/532773.html
標籤：反应样式化组件