无法使用Webpack加载图像并在SSR中做出反应

Question

When was compile react in SSR output this error :

Warning: Prop src did not match. Server: "6eccc1deda4ab0e5bd5f0ffc12b182d9.png" Client: "/app/b2c50f601d2ca40b58c37c526b62b120.png"

My code in react for add image is like this:

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

And my webpack have this rule with '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
        }
      }
    }
  ]
}

How can I solve it?

I already solved this, I did it in the following way:

{
  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
        }
      }
    }
  ]
}

Answer 1

To resolve the problem you have to add the client file-loader config (name and publicPath) to the server file-loader config.

Your server file-loader config should be:

{
  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
        }
      }
    }
  ]
}