不使用 webpack 加载图像并在 SSR 中做出反应答案

【问题标题】：Not load images with webpack and react in SSR不使用 webpack 加载图像并在 SSR 中做出反应
【发布时间】：2018-07-01 06:33:26
【问题描述】：

什么时候编译反应在 SSR 中输出这个错误：

警告：道具src 不匹配。服务器： “6eccc1deda4ab0e5bd5f0ffc12b182d9.png”客户端： "/app/b2c50f601d2ca40b58c37c526b62b120.png"

我的添加图片的代码是这样的：

import logo from './image/logo.png';

我的 webpack 使用 'image-webpack-loader' 有这个规则：

{
  test: /\.(jpe?g|png|gif)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          enabled: false,
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        // the webp option will enable WEBP
        webp: {
          enabled: false,
          quality: 75
        }
      }
    }
  ]
}

我该如何解决？

我已经解决了这个问题，我是通过以下方式解决的：

{
  test: /\.(png|jpe?g|gif)(\?.*)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        publicPath: 'app/'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: false,
          quality: 10
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    }
  ]
}

【问题讨论】：

你用什么做服务端渲染？您是否正在构建单独的服务器捆绑包？使用 bable/register 钩子？

标签： reactjs webpack server-side-rendering

【解决方案1】：

要解决此问题，您必须将客户端文件加载器配置（名称和 publicPath）添加到服务器文件加载器配置。

您的服务器文件加载器配置应该是：

{
  test: /\.(jpe?g|png|gif)$/i,
  use: [
    {
      loader: 'file-loader',
       options: {
         name: '[name].[ext]',
         publicPath: 'app/'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          enabled: false,
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        // the webp option will enable WEBP
        webp: {
          enabled: false,
          quality: 75
        }
      }
    }
  ]
}

【讨论】：