使用 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 得到錯誤：

未找到 ./app/components/App.js 模塊中的錯誤：錯誤：無法解析 /Users/mac/_DEV/_LAB/PIVX/PIVX-Planet-2 中的“文件”或“目錄”./images/PIVX_Planet_1a_239x83.png /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>

在這種情況下，沒有錯誤，但圖像顯示已損壞。

我嘗試使用所有這些組合更改圖像的相對路徑。

目錄結構：

• 應用程序
  • 組件
    • 應用程序.js
  • 圖片
    • PIVX_Planet_1a_239x83.png
  • 索引.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配置。

Answer 4

我已經嘗試了你們建議的所有內容，但沒有任何效果對我有用。 當我將代碼放入並“運行 dev”時，它會出現一個錯誤占位符。 我在 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">