logo标签列表

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

javascriptreactjswebpack
151
我是一名有用的助手，可以为您翻译文本。
我正在尝试在我的React组件中导入图像文件。我已经使用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>
        )
    } 
}

这是我的项目结构。

enter image description here

我已经按照以下方式设置了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控制台也没有给我任何错误。请提供任何帮助。我对React很新，并且无法找到我的错误在哪里。

3
Shadid，你试过 <img src={require('../../assets/linux_logo.jpg')} /> 吗？ - Naga Sai A
是的，我尝试过了。控制台中没有错误，但我看不到图像。 - Shadid
1
你应该进行webpack构建并检查图像存储的位置。在img src中使用该路径。 - vijayst
@vijayst 大哥，谢谢您，很好用。 :) - Shadid
我已经为此苦苦挣扎了数小时。为什么在React中导入并正确显示单个标志图像如此困难？在纯HTML中这曾经是如此简单... - Jerry Chen
11个回答
247

尝试使用

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>
    );
  }
}
15
如果我想要导入10张图片会发生什么？ - Leo Gasparrini
5
@LeoGasparrini - 我不确定我理解你的问题-- 只要你在导入时为它们命名独特的名称，那么你应该可以导入任意数量的文件，对吗？ - Alexander Nied
1
我正在尝试相同的方法，但是Babel在抱怨，因为它无法理解png文件。我该如何让Babel跳过转译png文件？ - Sanish Joseph
2
对于那些好奇的人来说，当我们像这样导入一张图片时，mainLogo实际上是一个数据URI（data:image/png;....）或者一个公共URL（/static/logoWhite.svg），这取决于你的打包工具。 - d_bhatnagar
1
@Leo Gasparrini - 我猜你现在已经找到了答案：https://create-react-app.dev/docs/adding-images-fonts-and-files/ - StephonA
显示剩余4条评论
20

您也可以使用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>
    );
  }
}
1
当我尝试使用这个解决方案时，我遇到了这个错误 [HMR] unexpected require(./src/components/LeftBar/home.svg) from disposed module ./src/components/LeftBar/LeftBar.js LeftBar App@http://localhost:3000/static/js/main.chunk.js:115:79。你知道发生了什么吗？谢谢。 - Roby Cigar
13
如果图片在 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>
        )
    } 
}
7
如果我们不使用 "create-react-app" （webpack@5.23.0），则需要几个步骤。首先，我们应该作为 devDedepencie 安装 file-loader ，下一步是在 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和javascript中使用，只需要把扩展名从.ts改成.js即可。

祝好。

路径智能感知怎么样？如何让它工作？ - Ozan Mudul
3
在你的资产文件夹或任何你想要的地方创建一个名为images.ts或images.js的文件夹。
使用export {default as imageName} from 'route'语句来导出文件夹中的所有图片。
export { default as image1 } from "assets/images/1.png";
export { default as image2 } from "assets/images/2.png";
export { default as image3 } from "assets/images/3.png";
export { default as image4 } from "assets/images/4.png";

然后使用 import {imageDefaultName} from 'route' 导入图片。
import {image1,image2,image3,image4} from 'assets/images'

<img src={image1} />
<img src={image2} />
<img src={image3} />
<img src={image4} />

或者

import * as images from 'assets/images'

<img src={images.image1} />
<img src={images.image2} />
<img src={images.image3} />
<img src={images.image4} />
3
您也可以尝试：
...
var imageName = require('relative_path_of_image_from_component_file');
...
...

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

注意：确保图像不在项目根目录之外。
2
使用变量动态导入图像，您可以使用以下代码：
  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} />
1

我也有类似的需求，需要导入 .png 图片。我已将这些图片存储在公共文件夹中。因此，以下方法适用于我。

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

除了上述方法，我还尝试使用require，并且它对我也起作用了。我已经将图像包含在src目录下的Images文件夹中。
<img src={require('./Images/image1.png')}  alt="Image1"/>
0
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;
0

我使用了user5660307的答案。另外，如果要在React和Node.js中进行服务器端渲染，可以将以下内容添加到Express服务器中：

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]",
        },
      },
    ],
  },
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接