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

相关推荐
C_心欲无痕3 天前
Next.js 的哲学思想
开发语言·前端·javascript·ecmascript·nextjs
wanfeng_0915 天前
nextjs cloudflare 踩坑日记
nextjs·cloudflare
吉吉安1 个月前
Nextjs+Supabase
前端·nextjs·supabase·vercel
低代码布道师2 个月前
01Nextjs+shadcn 医疗预约系统搭建-初始化脚手架
nextjs·shadcn
wanfeng_093 个月前
stripe/paypal
react·ts·nextjs·paypal·stripe
PyAIGCMaster4 个月前
我的项目开发的一般流程,供交流
react·nextjs
叶常落6 个月前
感恩日记:记录生活中的美好时刻
nextjs
飞鸟malred7 个月前
nextjs入门
前端·react·nextjs
任磊abc10 个月前
nextjs15简要介绍以及配置eslint和prettier
eslint·nextjs·prettier·nextjs15
任磊abc1 年前
nextjs+material UI实现换肤功能
nextjs·material ui·换肤