Question

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

有缺陷的组件类看起来像这样......

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} 。

Answer 2

很抱歉浪费你们这些＆＃39;时间。我有一个不透明度：0规则，我没有注意到。

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

2 个答案: