Question

我正在尝试在我的一个反应组件中导入一个图像文件。我有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]',
    },
},

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语句中使用logging.level.org.springframework=DEBUG和正确的路径，

require

Answer 4

HyperLog.d(TAG,"debug");
HyperLog.i(TAG,"information");
HyperLog.e(TAG,"error");
HyperLog.v(TAG,"verbose");
HyperLog.w(TAG,"warning");
HyperLog.a(TAG,"assert");
HyperLog.exception(TAG,"exception",throwable);

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

简单的方法是使用location.origin
它将返回您的域
前
http：//本地主机：8000
https://yourdomain.com

然后用一些字符串concat ...
享受...

<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 7

你也可以试试：

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

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

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

Answer 8

如果我们不使用“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;

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

干杯。

Answer 9

我使用了 user5660307 答案。对于使用 react 和 nodejs 的服务器端渲染，您可以在 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]",
        },
      },
    ],
  },
};

Answer 10

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

Answer 11

对于一些初学者来说这可能是有用的，因为我自己就是一个并且令人尴尬地没有注意到这一点：我们需要包含＆＃34; Image＆＃34;在代码最开始的import方法中。

所以：

namespace ASP.NETMVCCRUD.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;

    public partial class Employee
    {
        public int EmployeeID { get; set; }

        public string Name { get; set; }

        public string Position { get; set; }
        public string Office { get; set; }
        public Nullable<int> Age { get; set; }
        public Nullable<int> Salary { get; set; }
    }
}

希望这有助于一些人。

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

11 个答案: