我正在尝试构建一个 React 主页,我已经有一个标题,我尝试导入 .png 照片,但是当我使用下面的代码这样做时,我的标题消失了,图像没有显示,而且整个页面都是空白的,我做错了什么?
首页组件:
import React from 'react';
import {ReactComponent as Arrow} from '../../assets/increase.svg'
import QuestionMark from '../../assets/question2.png'
import './homepage.styles.scss';
const HomePage = () => (
<div className='homepage'>
<div className='question-mark-container'>
<QuestionMark className='question-mark'/>
</div>
</div>
);
export default HomePage;
首页组件样式:
.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
.question-mark-container{
height: 60%;
width: 30vw;
padding: 25px;
}
}
我不认为我的路由器与此问题相关,但如有必要会发布
答案 0 :(得分:3)
你不能直接使用 png 文件,而是在 img 标签中使用它:
import React from 'react';
import {ReactComponent as Arrow} from '../../assets/increase.svg'
import QuestionMark from '../../assets/question2.png'
import './homepage.styles.scss';
const HomePage = () => (
<div className='homepage'>
<div className='question-mark-container'>
<img src={QuestionMark} className='question-mark' />
</div>
</div>
);
export default HomePage;