问题标签 [nextjs-image]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Next-Image 相对路径有效，但在抓取时指向 404 页面
我正在使用next-image，我所有的图像都在云端，并且图像显示 ✅。但是，当我使用或其他 SEO 工具分析我的网站时Screaming Frog，我会收到大量 404，因为它们会在我的域中查找这些图像。
例如：
下一个图像组件
Next.js 采用相对路径并将其与next.config文件中的图像路径结合起来。所以我们得到：https://res.cloudinary.com/jumbodonuts/image/upload/blog/donut.jpg
下一个.config
我的图像都显示了，所以它确实有效。然而，搜索引擎优化工具/谷歌似乎认为我的图像在我的网站所在的域上。他们认为相对路径是我自己域上的相对路径：例如：www.jumbodonuts.com/blog/donut.jpg- 这会导致 404 并且对我的 SEO 不利。这里要注意的一件事是，我使用的是nextjs静态站点生成功能 ( next export)，不确定这是否会有所不同。
我可以在这里做什么？我没有next-image正确使用吗？
html - 错误：不要使用![]()
. 改用“下一个/图像”中的图像。- Next.js 使用 html 标签![]()
（带有样式组件）
我知道在 Next.js 中我们有 Image 组件，但我遇到的问题是我不能将它用作普通的 HTML 标记，如<img />. 我必须给它一个布局，但是没有选项可以将它作为一个普通的 HTML 标签来控制，除此之外，我不能对它使用成帧器动作。
所以我刚刚安装了next-images，所以我当然可以导入图像并使用它们，一切正常，直到我 npm run build 登录页面看到一些结果，并且有这个警告：
这是我使用img带有样式组件的标签的地方：
我该怎么做才能img正常使用标签？
next.js - 错误：`next/image` 上的 src 属性无效，主机名“res.cloudinary.com”未在 `next.config.js` 中的图像下配置
我正在创建一个对象数组，其中我有一个名为 的图像 src 属性coverSrc，并且我正在将其导出并导入到我的主要组件中。在我的主要组件中，我使用 Material UI CardMedia 组件来显示图像。但它给了我以下错误：
src 属性无效
next/image，主机名“res.cloudinary.com”未在您的图像下配置next.config.js
data.js
ListItem.jsx
next.config.js
我认为从对象属性数组导入coverSrc存在一些问题。
谁能帮我弄清楚？如何从对象数组中导出 coverSrc 属性？
reactjs - 下一个图像，图像随着布局响应而消失
我正在尝试将 Next Image 组件添加到我的项目中。
我有一个问题，当我添加layout='responsive'.
代码：
有解决办法吗？或任何其他优化图像的方法？
node.js - Next.js, Next/Image 从本地运行的后端服务器获取图像
我目前正在为服务运行带有 Node.js 后端的 Next.js 前端，但由于服务器设置，我无法请求现有的域服务器端。因此，我无法对图像使用 SSR，并且图像在 SSR 期间始终超时。有什么可能的解决方案吗？
基本上，
当Next.js在从子域获取图像时尝试构建优化的图像服务器端时，上述情况会导致错误
javascript - PNG 和 JPEG 图像在 Next.js 中无法使用 next-optimized-images
我使用 next-optimized-images 和 next.js v11.0.1 并且还安装了imagemin-mozjpeg imagemin-optipng imagemin-svgo. SVG 图像工作正常，但是当我尝试使用 .png 或 .jpg 图像时，不会显示任何图像，而是显示 alt 属性文本或损坏的图像。这是详细信息：
图片大小：13 KB
JSX 部分
next.config.js
包.json
检查零件
当我从外部网站 url 导入图像时它工作正常
next.js - Next.js Cloudinary 图像未使用加载程序显示
我正在尝试将next/image组件与 cloudinary.com 和 cloudinary loader 一起使用。但我的图像不显示加载器，它只显示没有加载器。
不带装载机
next.config.js文件：
我的图像组件：
这是在这里工作
带装载机
next.config.js文件：
我的图像组件是相同的：
使用加载器，我的页面看起来像这样
我怎么解决这个问题？
next.js - Next.js 图像未进入生产服务器
图像组件
next.config.js
在这里，我试图在我的 UI 中显示本地图像。在开发服务器中它正在工作，但是当我部署它时它不起作用。它说内部服务器错误
这是我在谷歌应用引擎上检查部署的应用程序：
我该如何解决？
css - Tailwind CSS、Next.js 图片组件马赛克式设计
您如何使图像显示为这样？
有些图片被看到被剪掉了，或者至少看起来是这样的，或者如果尺寸合适，它会在类别中找到适合这里的图片（我认为找到图片会更复杂大小合适）
我知道 NextJS 有 Image 组件，但它需要一个宽度/高度或layout='fill'. 那么是否有一种简单的 css 方式来做类似于图像的事情？
next.js - 在 nextjs 中将 placeholder="blur" 添加到多个远程图像
我有一个 nextjs 应用程序，它从 api 显示电影及其海报，我试图在所有图像完全加载显示之前为它们添加模糊效果。我在使用plaiceholder的 github 讨论上发现了这条评论，但我找不到让它适用于多个图像的方法。这是我的一些代码
你可以在这里看到完整的代码