Загрузка изображения WebP в ReactJS - PullRequest
Новая
       10

Загрузка изображения WebP в ReactJS

0 голосов
/ 15 марта 2020

Я пытаюсь использовать изображения WebP в моем реактивном проекте, который:

1- Ejected (Да, это очень глупо с моей стороны, но я был очень неопытен)

2- Использование webpack

, поэтому я храню изображения в ресурсах / изображениях, где у меня есть расширения .png, .svg, .jpg, .jpeg и .webp. Вот как я передаю оба изображения в компонент, например: 

import FemaleDoctorWebp from "../../../../../assets/images/women.webp";
import FemaleDoctor from "../../../../../assets/images/women.png";

 <picture>
   <source srcSet={FemaleDoctorWebp} type="image/webp" />
   <source srcSet={FemaleDoctor} />
   <img alt="Female doctor image" src={FemaleDoctor} />
 </picture>

И это мой webpack.api.config. js: 

const path = require("path");
const getEnvironmentConstants = require("./getEnvironmentConstants");

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
  entry: ["./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-bundle.js",
    publicPath: "/dist/"
  },
  devServer: {
    hot: true,
    historyApiFallback: {
      disableDotRule: true
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: true
            }
          }
        ]
      },
      {
        test: /\.(s*)css$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]__[local]__[hash:base64:5]"
              },
              importLoaders: true,
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")()]
            }
          }
        ]
      },
      // images
      {
        test: /\.(png|jp(e*)g|svg|webp|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8000, // Convert images < 8kb to base64 strings
              name: "images/[hash]-[name].[ext]"
            }
          }
        ]
      },
      //File loader used to load fonts
      {
        test: /\.(gif|png|jpe?g|svg|webp)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              webp: {
                quality: 80
              }
            }
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    alias: {
      assets: path.resolve(__dirname, "src/assets/")
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": getEnvironmentConstants()
    })
  ]
};

Это то, что я получаю в HTML ДОМ: 

<picture>
  <source srcset="data:image/webp;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJlNzgwZTk0OTBiNzU1OGZlNDY2NjNiNTllNDg5Mjg4MS53ZWJwIjs=" type="image/webp">
  <source srcset="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI0MWNmYjk2NGVkMTJmNTc3MWFhYWJkZWU0YmY1MTIyZS5wbmciOw==">
  <img alt="Female doctor image" src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI0MWNmYjk2NGVkMTJmNTc3MWFhYWJkZWU0YmY1MTIyZS5wbmciOw==">
</picture>

Но похоже, что ReactJS не загружает изображение должным образом. Я пытался использовать другие npm пакеты, но без шансов. Мой конфиг webpack не подходит для этого? Или мне нужен дополнительный шаг для использования в HTML?

Любая помощь или направление?

...