AI协助开发将想法迅速转移到工作产品. DeSource Image将图像准备保留在该开发回路内. 添加一个合适的本地或远程源,然后用组件道具控制其输出.

保留 /img/hero.jpg 而不是导出 hero-480.webp, (中文(简体) ), hero-960.webp,以及 hero-1600.webp。DeSource Image 将一个图像输入到提供者 URL,响应 srcset, (中文(简体) ), <picture> 源,占位符,预装元数据,预设,别名,源验证,以及本地IPX路由.

对于MVP和日常产品开发,图像质量成为了代码编辑. 变动 quality={80} 改为 quality={65} 并保留相同的源文件、组件和 URL.

@desource/image-react 为常见情况提供组件,为应用程序自有标记提供钩子,为 next/image,以及 Vite 和 Next.js App 路由器的服务器助手。 每一个API 使或供应本地 <img> 财务报告和审定财务报表 <picture> 标记.

提供者配置是可选的 。 在Vercel,Netlify,或AWS Amplify上,DeSource图像从部署环境中选择平台图像服务. 在其它任何地方,它会倒回内置的IPX路径. 明确提供商总是赢.

反应为什么是源代码图像?

React没有内置图像优化层. Next.js对于Next-Online应用有强大的图像管道. DeSource Image增加了部署意识提供者选择,内置提供者模块,本地IPX,以及也可以在Next.js之外工作的图像规则.

• 已建成快速产品迭代. 改变JSX中的图像质量,格式,收成,或响应大小. 源文件和文件名保持不变.
• 一个源而不是导出变体. 从一个合适的图像开始,生成每个屏幕所需的宽度和格式.
• 部署意识提供者选择. 离开 provider 打开 auto. DeSource Image可探测Vercel,Netlify,或AWS 放大并用于本地环境或其他环境.
• Vite和Next.js使用相同的图像模型. 保留相同的输入,预设,化名,以及跨应用程序的提供者.
• 原生框架 API. 使用 DsImage 财务报告和审定财务报表 DsPicture,或将钩子结果传播到设计系统拥有的元素上。 产出仍属本地 <img> 财务报告和审定财务报表 <picture> 标记.
• 数十个内置供应商模块. 导入一个提供者子路径, 使用完整的注册, 或注册一个输入的自定义提供者 .
• 内建局部优化器. Vite Middreware和一款Next.js App Router路由处理器服务于IPX的变换,没有单独的图像服务.
• next/image 现保留. createNextImageLoader() 在DeSource Image 拥有供应商 URL 时, 允许 Next 自己渲染 .

如何比较

对于下一个应用程序, next/image 仍为好人选. DeSource Image是更强的选择,当主机本地工作流程必须延伸到Next.js以外,或者当提供者政策,预设,化名,源规则必须在框架,主机和图像服务之间保持稳定.

安装

npm install @desource/image-react

安装 ipx 只有在应用程序服务于本地时 /_ipx 转换本身:

npm install ipx

ipx, (中文(简体) ), vite,以及 next 是可选的同龄人。 由Vercel,Netlify,Cloudinary,Imgix,Sanity等主机提供商或ImageKit不需要本地优化器.

快开始

import { DsImage, DsPicture } from '@desource/image-react';

export function Gallery() {
  return (
    <>
      <DsImage
        src="/img/hero.jpg"
        alt="Mountain lake at sunrise"
        width={1600}
        height={1000}
        sizes="100vw md:760px"
        format="webp"
        quality={76}
        placeholder
        preload={{ fetchPriority: 'high' }}
        className="hero"
      />

      <DsPicture
        src="/img/card.jpg"
        alt="Cabin under the stars"
        width={960}
        height={640}
        formats={['avif', 'webp']}
        fallbackFormat="jpg"
        imgAttrs={{ className: 'card-image' }}
      />
    </>
  );
}

这两个组成部分都具有原生要素. DsImage 转发 <img>· ; DsPicture 转发 <picture>。 。 。 .

配置一次

import { DsImageProvider } from '@desource/image-react';
import { cloudinaryProvider } from '@desource/image/providers/cloudinary';

export function App() {
  return (
    <DsImageProvider
      config={{
        provider: 'cloudinary',
        quality: 80,
        screens: { sm: 640, md: 768, lg: 1024 },
        domains: ['images.example.com'],
        providers: {
          cloudinary: cloudinaryProvider({ cloudName: 'demo' })
        },
        presets: {
          avatar: { width: 96, height: 96, fit: 'cover', format: 'webp' }
        }
      }}
    >
      <Gallery />
    </DsImageProvider>
  );
}

配置是可选的 。 在没有明确提供者的情况下,共享运行时间从构建环境检测出Vercel,Netlify,或AWS Amplify,并倒回IPX.

Dsimage 组件

import { DsImage } from '@desource/image-react';

export function Hero() {
  return (
    <DsImage
      src="/img/hero.jpg"
      alt="Aurora above a mountain lake"
      width={1600}
      height={900}
      sizes="100vw md:50vw lg:800px"
      format="webp"
      quality={82}
      placeholder
      preload={{ fetchPriority: 'high' }}
      className="hero"
      onLoad={() => console.log('loaded')}
    />
  );
}

alt 需要时间。 反应-内生道具,例如: className, (中文(简体) ), style, (中文(简体) ), crossOrigin, (中文(简体) ), fetchPriority, (中文(简体) ), referrerPolicy, (中文(简体) ), onLoad,以及 onError 被支持。 小写 fetchpriority 财务报告和审定财务报表 crossorigin 在跨框架共享选项时也接受别名.

DsPicture 组件

import { DsPicture } from '@desource/image-react';

export function ResponsiveHero() {
  return (
    <DsPicture
      src="/img/hero.jpg"
      alt="Responsive mountain landscape"
      width={1600}
      height={900}
      sizes="100vw md:50vw lg:800px"
      formats={['avif', 'webp']}
      fallbackFormat="jpg"
      className="hero-frame"
      imgAttrs={{ className: 'hero' }}
    />
  );
}

该部分使本地 <picture> 命令 <source> 元素和倒置 <img>。逗号分离 format="avif,webp"数组 format,则 legacyFormat 支持别名.

本地标记的钩子

当设计-系统组件或应用程序模板必须拥有最后的 DOM 时使用钩:

import { useDsImageProps, useDsPictureProps } from '@desource/image-react';

function NativeImage() {
  const img = useDsImageProps({
    src: '/img/card.jpg',
    alt: 'A coastal village',
    width: 720,
    height: 480,
    placeholder: true,
    className: 'card-image'
  });

  return <img {...img} />;
}

function NativePicture() {
  const picture = useDsPictureProps({
    src: '/img/card.jpg',
    alt: 'A coastal village at sunset',
    width: 720,
    height: 480,
    formats: ['avif', 'webp'],
    fallbackFormat: 'jpg',
    imgAttrs: { className: 'card-image' }
  });

  return (
    <picture {...picture.pictureProps}>
      {picture.sources.map((source) => (
        <source key={`${source.type}:${source.srcSet}`} {...source} />
      ))}
      <img {...picture.imgProps} />
    </picture>
  );
}

钩子处理占位符预加载/解码状态,加载/误入转发,并用引用计数处理头前加载链接.

自定义渲染

使用 custom 当生成的图像道具应在自定义标记内提供时:

import { DsImage } from '@desource/image-react';

export function Figure() {
  return (
    <DsImage src="/img/hero.jpg" alt="Mountain lake" width={1200} placeholder custom>
      {({ imgProps, src, isLoaded }) => (
        <figure data-src={src} data-loaded={isLoaded}>
          <img {...imgProps} />
          <figcaption>Mountain lake</figcaption>
        </figure>
      )}
    </DsImage>
  );
}

可调用助手

import { useDsImage } from '@desource/image-react';

function Avatar({ src }: { src: string }) {
  const image = useDsImage();
  return <img src={image(src, { width: 96, height: 96, fit: 'cover' })} alt="" />;
}

可调用帮助者暴露 getImage, (中文(简体) ), getSizes, (中文(简体) ), getMeta, (中文(简体) ), getAttrs, (中文(简体) ), getPicture, (中文(简体) ), getPreloadLink,并配置了预设快捷键.

下一个.js

直接使用脱源图像组件

主包条目是一个客户端条目,因为占位符和头部预装使用浏览器生命周期API.

'use client';

import { DsImage } from '@desource/image-react';

export function ProductImage() {
  return <DsImage src="/products/chair.jpg" alt="Oak chair" width={1200} height={900} format="webp" />;
}

对于主机提供者,按常态配置提供者. 对于本地IPX URL,需要添加一个 App Router 路由处理器.

使用源代码图像 next/image

// ds-loader.ts
import { createNextImageLoader } from '@desource/image-react/next';

export const dsLoader = createNextImageLoader({
  provider: 'vercel'
});

import NextImage from 'next/image';
import { dsLoader } from './ds-loader';

export function Hero() {
  return <NextImage loader={dsLoader} src="/img/hero.jpg" alt="Hero" width={1200} height={800} />;
}

这样吧 next/image 在DeSource Image拥有提供商 URL 规则的同时,保持其渲染行为.

应用路由器 IPX 路由

// app/_ipx/[...path]/route.ts
import { createNextImageRouteHandler } from '@desource/image-react/next';

export const GET = createNextImageRouteHandler({
  dirs: ['public'],
  domains: ['images.example.com'],
  maxAge: 60 * 60 * 24 * 30
});

远程优化默认被拒绝 。 添加可信赖 domains,或设置 allowAllDomains: true 仅供有意公开优化者使用.

Vite 开发优化器

// vite.config.ts
import { dsImage } from '@desource/image-react/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [dsImage({ dirs: ['public'] })]
});

插件服务 /_ipx 在 Vite 开发和预览期间。 它还将一个定型供应商烤成客户端,SSR捆绑则使用同一种供应商进行水分处理.

供应商和预设

从核心包注册内置或自定义提供者 :

import { DsImageProvider } from '@desource/image-react';
import { imagekitProvider } from '@desource/image/providers/imagekit';

export function App() {
  return (
    <DsImageProvider
      config={{
        provider: 'imagekit',
        providers: {
          imagekit: imagekitProvider({ baseURL: 'https://ik.imagekit.io/demo' })
        },
        presets: {
          card: { width: 960, height: 640, sizes: '100vw md:480px', format: 'webp' }
        }
      }}
    >
      <DsImage preset="card" src="/products/chair.jpg" alt="Oak chair" />
    </DsImageProvider>
  );
}

供应商模块和定制供应商公用事业记录如下: @desource/image。 。 。 .

链接

• 仓库
• 核心一揽子计划
• 角软件包
• Svelte 软件包
• Next.js 图像优化文件
• 安全政策

许可证

麻省理工学院,2026年