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

相关推荐
叶常落2 个月前
感恩日记:记录生活中的美好时刻
nextjs
飞鸟malred3 个月前
nextjs入门
前端·react·nextjs
任磊abc6 个月前
nextjs15简要介绍以及配置eslint和prettier
eslint·nextjs·prettier·nextjs15
任磊abc6 个月前
nextjs+material UI实现换肤功能
nextjs·material ui·换肤
堂铭9 个月前
NextJS多语言
前端·i18n·nextjs
Mebius191610 个月前
开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具
前端·react.js·typescript·开源·github·tailwindcss·nextjs
tangfuling19911 年前
用 nextjs 创建 Node+React Demo
前端框架·react·nextjs
A洛1 年前
Cloudflare Pages 部署 Next.js 应用教程
开发语言·github·nextjs·cloudflare·cloudflarepages
Zong_09151 年前
NextJs - 服务端/客户端组件之架构多样性设计
nextjs
hawk2014bj1 年前
NextJS 使用 Docker 发布
docker·nextjs