Question

我正在尝试构建一个 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;
    }
}

我不认为我的路由器与此问题相关，但如有必要会发布

Answer 1

你不能直接使用 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;

图像不出现，整个页面变为空白

1 个答案: