上住房和城乡建设部网站,建立网站后台,wordpress图文模板,网页制作与设计的英文Next.js 中的 Image 组件相比于传统的 img 标签有以下几个优点#xff1a;
懒加载#xff1a;Image 组件自带懒加载#xff0c;当页面滚动到 Image 组件所在位置时才会加载图片#xff0c;从而加快页面的渲染速度。自动优化#xff1a;Image 组件会自动将图片压缩、转换格…Next.js 中的 Image 组件相比于传统的 img 标签有以下几个优点
懒加载Image 组件自带懒加载当页面滚动到 Image 组件所在位置时才会加载图片从而加快页面的渲染速度。自动优化Image 组件会自动将图片压缩、转换格式、调整大小以达到更好的性能和用户体验。支持多种图片源Image 组件支持使用本地文件、远程 URL、云存储等多种方式来加载图片更加灵活方便。支持响应式图片Image 组件可以根据不同设备屏幕大小来加载不同分辨率的图片以达到最佳的视觉效果和性能表现。此外Image 组件还可以使用 layout 属性来控制图片的布局方式包括填充、响应式、不变形等多种方式。总之Next.js 中的 Image 组件在性能、用户体验、开发效率等方面都优于传统的 img 标签因此在开发过程中应当优先考虑使用 Image 组件。
Image src{props.data.thumb}width{800} height{600} alt{}className w-full overflow-hidden rounded-md cursor-pointer mb-3/NextJS中的Image加载其他域名地址下图片会出现如下错误 ⨯ Error: Invalid src prop (https://images.xxx.com/photo/2023/dd2434067ce2093f77ef0a2b22725913.png) on next/image, hostname images.xxx.com is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-hostat Array.map (anonymous)解决方法 next.config.js文件中加入
const nextConfig {reactStrictMode: true,images: {domains: [images.xxx.com]}
}如果你项目中有不确定的任意域名图片的需求还是用img标签吧没有找到nextConfig中通配符允许任意域名的配置方式。
使用img标签npm run build可能会报如下警告
./src/app/(components)/article-row.tsx
18:11 Warning: Using img could result in slower LCP and higher bandwidth. Consider using Image / from next/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element next/next/no-img-element
18:11 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text改为
pictureimg src{props.data.thumb}/
/picture警告不再出现
