javascript - 在 ReactJS 中加载 WebP 图像
问题描述
我正在尝试在我的反应项目中使用 WebP 图像,即:
1-弹出(是的,我很愚蠢-但我非常缺乏经验)
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 DOM 中得到的:
<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 中使用?
有什么帮助或方向吗?
解决方案
推荐阅读
- excel - Excel IF/THEN/VLOOKUP 嵌套公式
- jupyter-notebook - jupyter ipython notebook 无法打开正常运行的 qtconsole
- postgresql - postgres regexp_matches 奇怪的行为
- python - 在 python 中通过身份验证从视频 url 获取帧
- powerbi - Power BI如何编辑数据源连接SQL语句
- reactjs - 将函数/状态变量传递给 React 组件(箭头符号)
- emacs - 当前行高亮(hl-line)不尊重现有高亮
- html - 我应该使用
- python - Dask IndexError:列表索引超出范围
- vue.js - vuejs 将全局 mixin 放入单独的文件中