Question

编译时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
        }
      }
    }
  ]
}

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

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

1 个答案: