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

Question

我正在尝试在我的一个反应组件中导入图像文件。我有 webpack 的项目设置

这是我的组件代码

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

你也可以使用 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 3

如果图像位于 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 4

如果我们不使用“create-react-app”，步骤很少，(webpack@5.23.0) 首先我们应该将 file-loader 安装为 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

干杯。

Answer 5

我也有类似的要求，我需要导入 .png 图像。我已将这些图像存储在公用文件夹中。所以下面的方法对我有用。

<img src={process.env.PUBLIC_URL + './Images/image1.png'} alt="Image1"></img> 

除了上述之外，我还尝试过使用 require ，它也对我有用。我已将图像包含在 src 目录的 Images 文件夹中。

<img src={require('./Images/image1.png')}  alt="Image1"/>

Answer 6

你也可以试试：

...
var imageName = require('relative_path_of_image_from_component_file');
...
...

class XYZ extends Component {
    render(){
        return(
            ...
            <img src={imageName.default} alt="something"/>
            ...
        )
    }
}
...

注意：确保 Image 不在项目根文件夹之外。

Answer 7

要使用变量动态导入图像，可以使用以下方法：

  const imageName = "myImage.png"
  const images = require.context('../images',true);
  const [imgUrl, setImgUrl] = useState('');

  useEffect(() => {
    if (images && imageName) {
      setImgUrl(
        images(`./${imageName}`).default
      );
    }
  }, [imageName,images]);

  ...

  <img src={imgUrl} />

Answer 8

import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits


class App extends React. Component{
    constructor(props){
     super(props)
     this.state={
      imagesrc=imagename // as it is imported
     }
   }

   render(){
       return (

        <ImageClass 
        src={this.state.imagesrc}
        />
       );
   }
}

class ImageClass extends React.Component{
    render(){
        return (

            <img src={this.props.src} height='200px' width='100px' />
        );
    }
}

export default App;

Answer 9

我用user5660307 回答。对于使用 react 和 nodejs 的服务器端渲染，您可以在 express server 中添加：

app.use(express.static("public"));

在 webpack.client.js 中：

module.exports = {
  entry: "./src/client/client.js",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },

  module: {
    rules: [
      ...
      {
        loader: require.resolve("file-loader"),
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve("url-loader"),
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },
    ],
  },
};

Answer 10

简单的方法是使用 location.origin
它将返回您的域
前任
http://localhost:8000
https://yourdomain.com

然后连接一些字符串...
享受...

<img src={ location.origin+"/images/robot.svg"} alt="robot"/>

更多图片？

var images =[
"img1.jpg",
"img2.png",
"img3.jpg",
]

images.map( (image,index) => (

  <img key={index} 
       src={ location.origin+"/images/"+image} 
       alt="robot"
  />
) )

Answer 11

解决了在 src 文件夹中移动带有图像的文件夹时的问题。然后我转向图像（通过“create-react-app”创建的项目）
让图像 = document.createElement("img"); image.src = require('../assets/police.png');