css - 如何使用 create react app 在特定的 React 组件中显示图像？

Question

我正在用 React 改造一个旧站点。到目前为止一切都很好，但我刚刚制作了一个无法显示图像的新组件。它们在主类中可见，但在组件类中不可见。另外，如果我将整个组件粘贴到主类中，图像仍然不会显示。我必须从组件中剪切图像并粘贴到其他地方，以便它们显示任何内容。

错误的组件类看起来像这样......

import React from 'react';
import rock from '../images/pngs/rock.png';
import none from '../images/pngs/none.png';
import blue from '../images/pngs/blue.png';
import flash from '../images/pngs/flash.png';
import estim from '../images/pngs/estim.png';
import urban from '../images/pngs/urban.png';
import intl from '../images/pngs/intl.png';

export default class Radio extends React.Component {

render() {
      return (
         <section className="radio">

         <div className="septagon">
            <div className="labels">
           <p>
              <em></em>
           </p>
           <p>Radio</p>
           <p>Off</p>
        </div>
        <span className="deg40"><img src={rock} alt="" /></span>
        <span className="deg90"><img src={none} alt="" /></span>
        <span className="deg140"><img src={blue} alt="" /></span>
        <span className="deg195"><img src={flash} alt="" /></span>
        <span className="deg245"><img src={estim} alt="" /></span>
        <span className="deg295"><img src={urban} alt="" /></span>
        <span className="deg345"><img src={intl} alt="" /></span>
        <audio id="playmusic" preload="none"><source type="audio/mpeg" /></audio>
     </div>
  </section>
  )
   }
}

原始站点(因此您知道它应该是什么样子)是... http://matiny.altervista.org/VI/如果您按住 Q 按钮，您会看到一圈图标，这就是我想要显示的内容。不幸的是，图像是不可见的。

Answer 1

你可以在这里使用 require 和 import

使用要求:

const rock = require('../images/pngs/rock.png');

然后在图像src中解构它。或者你可以使用import来完成

使用导入:

import * as rock from '../images/pngs/rock.png';

并在图像 src 中解构它时使用 src= {rock.default} 。