都哪些网站可以做gif,滨州百姓网免费发布信息,wordpress定时发布原理,上海搭建商Webpack5 环境下 Openlayers 标注#xff08;Icon#xff09; require 引入图片问题环境版本Openlayers 使用 require 问题Webpack5 正确配置构建新环境的时候#xff0c;偶然发现 Openlayers 使用 require 的方式加载图片#xff08;Icon#xff09;报错#xff0c;开始…
Webpack5 环境下 Openlayers 标注Icon require 引入图片问题环境版本Openlayers 使用 require 问题Webpack5 正确配置构建新环境的时候偶然发现 Openlayers 使用 require 的方式加载图片Icon报错开始以为是 Openlayers 版本问题后来经过尝试
发现是 webpack 配置问题在 Webpack5 环境下使用了 Webpack4 的配置方式。
本文包括 环境版本、Openlayers 使用 require 问题、Webpack5 正确配置三部分。 环境版本
node 版本v16.16.0
npm 版本8.17.0 webpack 版本5.74.0
Openlayers 版本7.2.2
谷歌版本109.0.5414.75 Openlayers 使用 require 问题
本文尝试了三个主要版本7.2.2、6.15.1、5.3.3错误原因一致但是提示略有不同。
1. 使用 require 加载图片代码
const iconStyle new Style({image: new Icon({anchor: [0.5, 46],anchorXUnits: fraction,anchorYUnits: pixels,src: require(./assets/image/cluster/mark_red.png)}),
});2. 错误信息
7.2.2 版本 虽然报错但是提示不明确大概意思是 src 不能为空。 6.15.1 版本 给出了明确的错误原因可以 查看错误详情。 5.3.3 版本 给出了错误网址但是无法访问。 3. 通过代码解决问题
通过 console 输出查看发现 require 为对象并不是 base64 字符。因此只要获取 base64 即可。
const iconStyle new Style({image: new Icon({anchor: [0.5, 46],anchorXUnits: fraction,anchorYUnits: pixels,src: require(./assets/image/cluster/mark_red.png).default}),
});Webpack5 正确配置
1. 在 Webpack5 环境下使用 Webpack4 的配置
{test: /\.(png)|(jpg)|(gif)|(woff)|(svg)|(eot)|(ttf)$/,// test: /\.(png)|(jpg)|(gif)|(woff)|(eot)|(ttf)$/,use: [{loader: url-loader,options: {limit: 50000, //小于50K的 都打包name: [hash:8].[name].[ext],publicPath: layui-src/img/, //替换CSS引用的图片路径 可以替换成爱拍云上的路径outputPath: layui-src/img/ //生成之后存放的路径}}]
}通过查看 require 输出可以得知 require 获得的是 module 对象需要获取 default 的 base64 字符才能正常使用。
2. Webpack5 环境下使用 Webpack5 的配置
{test: /\.(jpe?g|png|svg|gif)/i,type: asset,generator: {filename: img/[hash][ext][query] // 局部指定输出位置},parser: {dataUrlCondition: {maxSize: 8 * 1024 // 限制于 8kb}}
}通过查看 require 输出可以得知 require 获得到的就是 base64 字符直接使用即可。 参考博客
webpack5 的使用四加载资源文件 Webpack 5 - Asset Modules 【记录1】VueOpenLayers 图片标注不显示问题
