javascript - Next-Image 相对路径有效,但在抓取时指向 404 页面
问题描述
我正在使用next-image
,我所有的图像都在云端,并且图像显示 ✅。但是,当我使用或其他 SEO 工具分析我的网站时Screaming Frog
,我会收到大量 404,因为它们会在我的域中查找这些图像。
例如:
下一个图像组件
<Image
src={`/blog/${imageSlug}`} <=== relative path to image
width="800"
height="800"
/>
Next.js 采用相对路径并将其与next.config
文件中的图像路径结合起来。所以我们得到:https://res.cloudinary.com/jumbodonuts/image/upload/blog/donut.jpg
下一个.config
images: {
loader: 'cloudinary',
path: 'https://res.cloudinary.com/jumbodonuts/image/upload/',
domains: ['res.cloudinary.com']
}
我的图像都显示了,所以它确实有效。然而,搜索引擎优化工具/谷歌似乎认为我的图像在我的网站所在的域上。他们认为相对路径是我自己域上的相对路径:例如:www.jumbodonuts.com/blog/donut.jpg
- 这会导致 404 并且对我的 SEO 不利。这里要注意的一件事是,我使用的是nextjs
静态站点生成功能 ( next export
),不确定这是否会有所不同。
我可以在这里做什么?我没有next-image
正确使用吗?
解决方案
您需要配置加载程序。
阅读更多关于:https ://nextjs.org/docs/basic-features/image-optimization#loader
使用 next 导出时,不支持 next/image 组件的默认加载器。但是,其他加载程序选项也可以使用。
推荐阅读
- jsf - 由于 java.lang.IndexOutOfBoundsException,登录不会重定向:索引:0,大小:0
- algorithm - 找到可以生成提供的 Connect-4 棋盘状态的任何一个移动序列
- networking - 什么是 GCP 控制台中 VM NIC 的“网络分析”部分中信息表的 google api 端点
- unity3d - 为什么我的 3D 模型缺少带有蒙皮网格渲染器的 Geoface?
- java - 如何在Junit中使用基类@BeforeMethod为所有测试用例执行for循环
- sql - SQL中的switch函数和Null的无效使用
- pandas - 如何结合 GridSearchCV 和 SelectFromModel 来减少特征数量?
- angularjs - 以角度在节点红色 ui-template 中传递消息时,UI 消失
- macos - 如何使用 Button (action:{}) {} 以编程方式转到 swiftUI 中的另一个视图,而不是任何 NavigationLink 或其他什么?
- php - PHP支持一流的函数,是什么意思