如何在React组件中导入图像(.svg,.png)

Question

我试图在我的一个反应组件中导入一个图像文件.我有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控制台也没有给我任何错误.请帮忙.我很反应,无法找到我做错了什么.

Answer 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>
    );
  }
}

Answer 2

如果图像在 src/assets 文件夹中，您可以require在 require 语句中使用正确的路径，

var Diamond = require('../../assets/linux_logo.jpg');

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

Answer 3

您也可以使用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>
    );
  }
}

Answer 4

如果我们不使用“create-react-app”，则需要几个步骤，(webpack@5.23.0) 首先我们应该将文件加载器安装为 devDedepencie，下一步是在 webpack.config 中添加规则

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
}

，然后在我们的 src 目录中我们应该创建一个名为declarationFiles.d.ts（例如）的文件并在其中注册模块

declare module '*.jpg';
declare module '*.png';

，然后重新启动开发服务器。完成这些步骤后，我们可以导入并使用图像，如下面的代码所示

import React from 'react';
import image from './img1.png';
import './helloWorld.scss';

const HelloWorld = () => (
  <>
    <h1 className="main">React TypeScript Starter</h1>
        <img src={image} alt="some example image" />
  </>
);
export default HelloWorld;

适用于 typescript 和 javacript，只需将扩展名从 .ts 更改为 .js

干杯。