使用 Webpack 在 React 中加载图像

Question

我在使用 Webpack 和 React 将简单图像显示在简单应用程序中时遇到问题。

我通读了这篇文章并尝试了几种不同的方法，但不断出现各种错误，或者充其量有时没有错误，但也没有图像显示。

这是我的 React 组件：

import React from 'react';
import styles from '../css/main.css';

import Menu from './Menu';

const logo = require('./images/PIVX_Planet_1a_239x83.png');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test: 'foo'};
  }
  render() {
    return (
      <div>
        <div id='container'></div>

        <div className={styles.logo}>
          <img src={logo}/>
        </div>
        <div>
          <Menu/>
        </div>
      </div>
    );
  }
}

这是我的 webpack 配置：

...
module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 25000,
      },
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
...

有了这个，在控制台中从 webpack 得到错误：

ERROR in ./app/components/App.js Module not found: Error: Cannot resolve 'file' or 'directory' ./images/PIVX_Planet_1a_239x83.png in /Users/mac/_DEV/_LAB/PIVX/PIVX-Planet-2/app/components @ ./app/components/App.js 67:11-56

我也尝试过使用 babel-plugin-transform-react-jsx-img-import (https://www.npmjs.com/package/babel-plugin-transform-react-jsx-img-import)

然后只需使用：

<div className={styles.logo}>
  <img src="./images/PIVX_Planet_1a_239x83.png"/>
</div>

在那种情况下，没有错误，但图像显示损坏。

我试过使用所有这些组合更改图像的相对路径。

目录结构：

应用
- 组件
  - App.js
- 图片
  - PIVX_Planet_1a_239x83.png
- index.html ...

有什么见解吗？

Answer 1

根据您的目录结构，您需要使用的路径是

const logo = require('../images/PIVX_Planet_1a_239x83.png');

因为图像在 app 目录下，而不是在 components 下，您试图从那里获取 image 位置

还要确保所有 loaders 都已正确安装

Answer 2

你也可以尝试让为：

let logo = require('../images/PIVX_Planet_1a_239x83.png');

总是尽可能使用 let 来避免作用域怪物

Answer 3

我遇到的问题是使用

import logo from './images/PIVX_Planet_1a_239x83.png'

而不是

const logo = require('./images/PIVX_Planet_1a_239x83.png');

在带有定制 webpack 配置的 typescript React 应用程序中。

Answer 4

我已经尝试了你们建议的所有方法，但没有任何效果。当我输入代码并 'run dev' 时，它出现了一个错误占位符。我在 app.js 中使用它，并希望我的徽标作为主页的 link 或者只是显示，在这种情况下，我试图将它放在页面上。

import '../styles/globals.css'
import Link from 'next/link'
import bpdlogofull from '../public/bpdlogofull.png'


    `function MyApp({ Component, pageProps }) {
      return (
        <div>
          <nav className="border-b p-6">
            <img src={bpdlogofull} alt='logo'className='flex justify-end'/>
            <div className="flex mt-4">
              <Link href="/" className="home-button">

使用 Webpack 在 React 中加载图像

Loading images in React with Webpack

png

image

reactjs

webpack