如何在 React 组件中导入图像（.svg、.png）

javascript reactjs webpack

2022-08-30 04:58:33

我正在尝试在我的一个 react 组件中导入图像文件。我使用 Web 包设置了项目

这是我的组件代码

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

这是我的项目结构。

我已通过以下方式设置了我的 webpack.config.js 文件

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS.我可以从任何其他远程源获取图像，但不能从本地保存的图像获取图像。JavaScript Console也没有给我任何错误。请任何帮助。我对反应很陌生，无法找到我做错了什么。

答案 1

尝试使用

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

答案 2

您也可以使用 require 来渲染图像，例如

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}