使用 Webpack 在 React 中加载图像

Posted 2023-03-28

【中文标题】使用 Webpack 在 React 中加载图像

【英文标题】：Loading images in React with Webpack

【发布时间】：2017-08-31 23:08:25

【问题描述】：

我无法在使用 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 获取错误：

./app/components/App.js 中的错误 找不到模块：错误：无法解析 /Users/mac/_DEV/_LAB/PIVX/PIVX-Planet-2/app/components 中的“文件”或“目录”./images/PIVX_Planet_1a_239x83.png @ ./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 ...

有什么见解吗？

【参考方案1】：

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

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

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

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

【讨论】：

成功了！谢谢。不知道是怎么错过的（我试过了）。我还必须安装：npm install url-loader

我试过了。系统说我需要 15+ 声望才能这样做（我现在只有 10 个）。

（我还不能投票，但接受了）。谢谢

【参考方案2】：

你也可以试试 let as：

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

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

【参考方案3】：

我遇到的问题是使用

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

而不是

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

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

【参考方案4】：

我已经尝试了你们建议的所有方法，但没有任何东西对我有用。当我将代码放入并“运行开发”时，它会出现一个错误占位符。我在 app.js 中使用它，并希望我的徽标作为主页的链接或只是显示出来，在这种情况下，我试图将它放在页面上。

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。