Question

我正在尝试在我的React Web App上渲染图像，但是图像损坏了。但是，当我执行文件路径的console.log时，我看到以下内容似乎是正确的。我们将url-loader和file-loader与webpack一起使用，并根据需要直接在import语句中导入文件路径。我曾尝试添加必需的（'imageFilePath.png'），但这也不起作用。

当前，图像与App.js一起直接放置在src文件夹中。

这是我的App.js：

import React, { Component } from 'react'
import './App.css'
import {Tweet} from 'react-twitter-widgets';
import logoFinal from './logoFinal.png';

class App extends Component {
render () {
    const { error, isLoaded} = this.state;
    if (error){
      return <div> Error: {error.message}</div>
    } else if (!isLoaded){
      return <div>Loading...</div>
    } else{
    return (

     <div className="container">
        <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <a className="navbar-brand pull-left" href="/home">
          <div>
          <img src={require('./logoFinal.png')} width='100' margintop='-7' /></div></a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div className="navbar-nav">
              <a className="nav-item nav-link active" href="#">Home <span className="sr-only">(current)</span></a>
              <a className="nav-item nav-link" href="#">By State</a>
            </div>
          </div>
          </div>
        </nav>

然后在我的webpack.config.js中，模块部分中包含以下内容：

{
  test: /\.(png|jp(e*)g|svg)$/,  
  use: [{
    loader: 'url-loader',
    options: { 
      limit: 8000, // Convert images < 8kb to base64 strings
      name: 'images/[hash]-[name].[ext]'
    } 
  }]
},
{
  // "oneOf" will traverse all following loaders until one will
  // match the requirements. When no loader matches it will fall
  // back to the "file" loader at the end of the loader list.
  oneOf: [
    // "url" loader works like "file" loader except that it embeds assets
    // smaller than specified limit in bytes as data URLs to avoid requests.
    // A missing `test` is equivalent to a match.
    {
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      loader: require.resolve('url-loader'),
      options: {
        limit: 10000,
        name: 'static/media/[name].[hash:8].[ext]',
      },
    },

Answer 1

欢迎使用StackOverflow！

通过这一行，您已经导入了图像。

import logoFinal from './logoFinal.png';

logoFinal变量将是实际的图像路径，它将由webpack生成。因此，您可以在<img />标记中将其用作src属性。

<img src={logoFinal} />

您 webpack配置看起来很奇怪，因为您已经为图像定义了两个规则。后来带有require.resolve('url-loader')的人似乎是正确的。

Answer 2

我正在与Natalie合作。我已经删除了Web Pack中多余的url-loader，并保留了第二个。我尝试了这些建议，但图像仍然呈现为损坏状态。我看到html中的img是这样的：http://localhost:3000static/media/logoFinal.fb830421.png

我也尝试使用文件加载器。

Webpack损坏的React中的图像渲染

2 个答案: