nextjs中使用image图片

  1. 使用nextjs的组件:

    javascript 复制代码
    import Image from "next/image";
    
    <Image src="xxx" alt="图片" width={300} height={300} />
  2. 加入允许跨域:
    在next.config.js中加入

    javascript 复制代码
    const nextConfig = {
        images: {
            domains: ["images.doc.ceo"]
        }
    }
    
    module.exports = nextConfig;

不然会出现:Error: Invalid src prop (https://images.dog.ceo/breeds/terrier-westhighland/n02098286_617.jpg) on next/image', hostname "images.dog.ceo"is notconfigured under images in your next, config.jsSee more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

相关推荐
tangfuling19912 天前
用 nextjs 创建 Node+React Demo
前端框架·react·nextjs
A洛2 天前
Cloudflare Pages 部署 Next.js 应用教程
开发语言·github·nextjs·cloudflare·cloudflarepages
Zong_09151 个月前
NextJs - 服务端/客户端组件之架构多样性设计
nextjs
hawk2014bj1 个月前
NextJS 使用 Docker 发布
docker·nextjs
hawk2014bj1 个月前
NextJS 服务器端代码调试
react·nextjs·ssr
loong_XL1 个月前
nextjs 实现TodoList网页应用案例
开发语言·前端·javascript·nextjs
Zong_09153 个月前
NextJs 系列文章
nextjs
Ygria_3 个月前
详解Next Auth:自定义邮箱密码登录注册、Github、Notion授权 & Convex集成
github·nextjs·notion
松桑的前端后花园3 个月前
#13前端后花园周刊-10个现代 Node.js 运行时新特性、Nextjs15、Astro4.9、CSS压缩
前端·javascript·css·node.js·nextjs·前端周刊·前端后花园周刊
Zong_09154 个月前
NextJs 数据篇 - 数据获取 | 缓存 | Server Actions
react.js·nextjs