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

IT技术 javascript reactjs webpack
2021-01-30 17:58:34

我正在尝试在我的react组件之一中导入图像文件。我有使用 web pack 的项目设置

这是我的组件代码 

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]',
    },
},

附注。我可以从任何其他远程来源获取图像，但不能从本地保存的图像中获取。JavaScript 控制台也没有给我任何错误。请任何帮助。我对react很陌生，无法找到我做错了什么。

6个回答

尝试使用 

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>
    );
  }
}
@LeoGasparrini - 我不确定我明白你在问什么 - 只要你在导入时给它们指定唯一的名称，你应该能够导入任意数量的，不是吗？
2021-03-19 17:58:34
对于那些好奇的人，当我们导入这样的图像时，mainLogo 实际上是数据 URI (data:image/png;....) 或公共 URL (/static/logoWhite.svg)，这取决于您的捆绑器。
2021-03-25 17:58:34
我正在尝试相同的方法，但 babel 抱怨，因为它无法理解 png 文件是什么。如何让 babel 从转译中跳过 png 文件？
2021-03-26 17:58:34
如果我想导入 10 张图片会怎样？
2021-03-28 17:58:34
我建议您使用 create react 应用程序。此类问题已通过设置预先解决。而且您不需要重新设计流程
2021-04-10 17:58:34

您也可以使用 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>
    );
  }
}
当我尝试这个解决方案时，我收到了这个错误[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你知道发生了什么吗？谢谢
2021-03-30 17:58:34

如果图像在 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>
        )
    } 
}

如果我们不使用“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 的文件（例如）并在其中注册module

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

干杯。

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

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

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

<img src={require('./Images/image1.png')}  alt="Image1"/>
其它你可能感兴趣的问题
上一篇文本闪烁 jQuery 下一篇捕获按键而不在页面上放置输入元素？