如何解决如何在反应头盔中预加载最大内容的绘画图像
我在灯塔里收到了这个警告
我尝试执行了解更多链接告诉我的操作,并在图像的头部包含一个预加载标签,但我仍然收到警告
我尝试了这个预加载标签,当我右键单击图像并选择“在新标签页中打开”时,该网址是浏览器中的网址
<link rel="preload" as="image" href={`https://example.com:8080/src/assets/images/example.webp`} />
图像只是像 import banner from "images/banner-large.png";
这样被导入到 jsx 组件中,然后使用像 <img src={example} className="w-100 banner-img" alt="Description" />
这样的图像标签进行渲染
我还使用 img-optimizer-loader
对我的图像进行网络优化,并在我的 webpack 配置中将它们转换为 webp,如下所示
{
test: /\.(gif|png|jpe?g|webm|webp)$/i,use: [
{
loader: "img-optimize-loader",options: {
compress: {
// This will transform your png/jpg into webp.
webp: {
quality: 75,},disableOnDevelopment: true,name: "[path][name].[ext]",],
值得注意的是,我导入了我的图像
import image from 'src/assets/images/example.png'
但是因为img-optimize-loader
,我的所有图片都在构建中转换为 webp,而 webp 图像是显示的。
解决方法
直接在图像组件中导入和使用 Helmet
:
import { Helmet } from 'react-helmet'
import example from "images/example.png";
function Image () {
return (
<Helmet>
<link rel="preload" as="image" href={example}>
</Helmet>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。