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

相关推荐
康一夏3 天前
Next.js 13变化有多大?
前端·react·nextjs
低代码布道师5 天前
纯代码实战:MBA培训管理系统 (十六) ——岗位管理(新增、编辑、删除)
nextjs
低代码布道师8 天前
纯代码实战:MBA培训管理系统 (十四) ——用户管理(批量选择与批量删除)
javascript·nextjs
Zacks_xdc16 天前
【全栈】云服务器安装 MySQL + Next.js 连接完整 Demo
服务器·javascript·mysql·阿里云·nextjs·云服务器
念念不忘 必有回响16 天前
Drizzle ORM上手指南:在Next.js中优雅地操作PostgreSQL
开发语言·postgresql·nodejs·nextjs·drizzle
念念不忘 必有回响19 天前
Next.js 14-16 全栈开发实战:从 App Router 核心原理到 Server Actions 深度剖析
前端·nextjs
胡西风_foxww24 天前
nextjs部署更新,Turbopack 和 Webpack 缓存冲突问题解决
缓存·webpack·react·nextjs·turbopack
C_心欲无痕3 个月前
Next.js 的哲学思想
开发语言·前端·javascript·ecmascript·nextjs
wanfeng_093 个月前
nextjs cloudflare 踩坑日记
nextjs·cloudflare
吉吉安4 个月前
Nextjs+Supabase
前端·nextjs·supabase·vercel