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-angular 提供独立的组件、本地元素指令、可调用服务以及 IMAGE_LOADER 页:1 NgOptimizedImage。每个渲染 API 保持原生 <img> 财务报告和审定财务报表 <picture> 最后产出中的元素.

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

该套件支持Angular 19, 20, 21和22.

角部为什么有源图像 ?

角质 NgOptimizedImage 在对本地人进行性能检查和装入指导方面,仍是一个强有力的内在选择 <img>。来源图像添加了本地的部署意识提供者选择 <picture> 输出,每个图像提供者,以及用于Angular SSR的本地IPX.

• 已建成快速产品迭代. 更改模板中的图像质量、格式、裁剪或响应大小。 源文件和文件名保持不变.
• 一个源而不是导出变体. 从一个合适的图像开始,生成每个屏幕所需的宽度和格式.
• 部署意识提供者选择. 离开 provider 打开 auto. DeSource Image可探测Vercel,Netlify,或AWS 放大并用于本地环境或其他环境.
• <picture> 是一个一等的API. 部件和指令生成命令的AVIF/WebP源并有倒置控制.
• 原生框架 API. 使用独立的组件和本地元素指令. 产出仍属本地 <img> 财务报告和审定财务报表 <picture> 标记.
• 数十个内置供应商模块. 导入一个提供者子路径, 使用完整的注册, 或注册一个输入的自定义提供者 .
• 内建局部优化器. Angular SSR中件可以服务于IPX的转换而无需单独的图像服务.
• NgOptimizedImage 还行. provideDsImage() 将来源图像注册为角图像 IMAGE_LOADER。 。 。 .

如何比较

使用 NgOptimizedImage 当它的性能指导 和一个装载器覆盖应用程序。 在优化器跟随部署时选择脱源图像, Angular 需要本地 <picture> 和本地IPX,或同一提供者政策必须在Angular以外工作.

安装

npm install @desource/image-angular

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

npm install ipx

由Vercel,Netlify,Cloudinary,Imgix,Sanity等主机提供商或ImageKit不需要本地优化器. 添加 @desource/image 只有在应用程序直接进口核心助手或供应商工厂时,才构成直接依赖.

配置角

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

注册默认在 app.config.ts数字 :

import { ApplicationConfig } from '@angular/core';
import { provideDsImage } from '@desource/image-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDsImage({
      quality: 80,
      screens: { sm: 640, md: 768, lg: 1024 },
      domains: ['images.example.com']
    })
  ]
};

provideDsImage() 也登记角星 IMAGE_LOADER,所以同样的配置可以驱动 NgOptimizedImage数字 :

import { NgOptimizedImage } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  standalone: true,
  imports: [NgOptimizedImage],
  template: `<img ngSrc="/img/hero.jpg" alt="Mountain lake" width="1200" height="800" />`
})
export class HeroComponent {}

Dsimage 组件

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DsImageComponent } from '@desource/image-angular';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [DsImageComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <ds-image
      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' }"
      class="hero"
      (load)="onHeroLoad()"
      (error)="onHeroError()"
    />
  `
})
export class HeroComponent {
  onHeroLoad(): void {}
  onHeroError(): void {}
}

主机组件使用 display: contents;可见的节点是生成的本地 <img>。 。 。 . alt 需要时间。 数字和布尔模板属性被强制。 信号输入在源,修饰器,配置,或原生属性改变时会重新计算输出.

DsPicture 组件

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DsPictureComponent } from '@desource/image-angular';

@Component({
  standalone: true,
  imports: [DsPictureComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <ds-picture
      src="/img/hero.jpg"
      alt="Responsive mountain landscape"
      width="1600"
      height="900"
      sizes="100vw md:50vw lg:800px"
      [formats]="['avif', 'webp']"
      fallbackFormat="jpg"
      imgClass="hero"
    />
  `
})
export class HeroPictureComponent {}

该部分使本地 <picture> 命令 <source> 元素和倒置 <img>。 。 。 . format="avif,webp", (中文(简体) ), [format]="['avif', 'webp']",则 legacyFormat 支持别名.

本地标记指令

当模板仍为常规时使用指令 <img> 或者说 <picture>数字 :

import { Component } from '@angular/core';
import { DsImageDirective, DsPictureDirective } from '@desource/image-angular';

@Component({
  standalone: true,
  imports: [DsImageDirective, DsPictureDirective],
  template: `
    <img
      dsImage="/img/card.jpg"
      alt="A coastal village"
      width="720"
      height="480"
      densities="1x 2x"
      placeholder
      (dsLoad)="onImageLoad()"
      (dsError)="onImageError()"
    />

    <picture
      dsPicture="/img/card.jpg"
      alt="A coastal village at sunset"
      width="720"
      height="480"
      [formats]="['avif', 'webp']"
      fallbackFormat="jpg"
      (dsLoad)="onImageLoad()"
    >
      <img alt="A coastal village at sunset" />
    </picture>
  `
})
export class CardComponent {
  onImageLoad(): void {}
  onImageError(): void {}
}

指令产出的使用 (dsLoad) 财务报告和审定财务报表 (dsError) 所以他们不会与本地的DOM事件相冲突。 构成部分产出使用情况 (load) 财务报告和审定财务报表 (error)。 。 。 .

A 类 dsPicture 元素必须包含一个后退 <img>。指令管理生成 <source> 倒计时.

响应图像

sizes 接受正则浏览器字符串、断点短手字符串或对象:

<ds-image src="/img/gallery.jpg" alt="Gallery" width="1200" sizes="100vw sm:50vw lg:600px" densities="1x 2x" />

sizes = { sm: '100vw', md: '50vw', lg: 600 };

核心引擎将候选宽度复制,在需要时将其按供货商支持的大小夹住,并生成确定性 srcset 财务报告和审定财务报表 sizes 属性.

占位符和预装

<ds-image src="/img/hero.jpg" alt="Hero" width="1200" placeholder placeholderClass="blur" />
<ds-image src="/img/hero.jpg" alt="Hero" width="1200" [placeholder]="[48, 32, 25, 8]" />
<ds-image src="/img/hero.jpg" alt="Hero" width="1200" placeholder="data:image/png;base64,..." />

• placeholder 生成一个小的转换图像.
• 拖倒控制了宽度、高度、质量和模糊度.
• 字符串可以是自定义的URL或数据URL.
• 完整图像被预装出屏幕并仅在解码成功后替换占位符.
• placeholderClass 仅存在于占位符可见时.
• preload 插入响应 <link rel="preload" as="image"> 输入文档头.
• 相同的预装链接在拆卸时被计算出参考值并被移除.
• priority 设置急速装入和高优先级。 使用 preload 当需要头链接时.

SSR和初始水合输出使用相同的属性.

土著属性

组成部分直接暴露共同的本土属性,包括: class, (中文(简体) ), style, (中文(简体) ), id, (中文(简体) ), role,ARIA标签, referrerpolicy, (中文(简体) ), crossorigin, (中文(简体) ), usemap,以及 data-testid。 。 。 .

使用 nativeAttrs 用于任意图像属性 :

<ds-image src="/img/hero.jpg" alt="Hero" [nativeAttrs]="{ 'data-track': 'hero', draggable: false }" />

对于 <ds-picture>,使用时 imgAttrs, (中文(简体) ), imgClass,以及 imgStyle 倒置图像。 生成属性, 如 src, (中文(简体) ), srcset,维度,加载,和解码均由指令/组件所拥有,不能不慎被推翻.

可调用助手服务

import { inject } from '@angular/core';
import { DsImageService } from '@desource/image-angular';

const $img = inject(DsImageService).create();

const url = $img('/img/hero.jpg', {
  width: 800,
  format: 'webp',
  quality: 75
});

const attrs = $img.getAttrs({
  src: '/img/hero.jpg',
  alt: 'Hero',
  width: 800
});

打电话的帮手也暴露了 getImage, (中文(简体) ), getSizes, (中文(简体) ), getMeta, (中文(简体) ), getPicture, (中文(简体) ), getPreloadLink,并配置了预设快捷键.

供应商和预设

为共同部署路径提供方便:

import { provideDsAwsAmplifyImage, provideDsIpxImage, provideDsVercelImage } from '@desource/image-angular';

provideDsIpxImage();
provideDsVercelImage();
provideDsAwsAmplifyImage();

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

import { cloudinaryProvider } from '@desource/image/providers/cloudinary';
import { provideDsImage } from '@desource/image-angular';

provideDsImage({
  provider: 'cloudinary',
  providers: {
    cloudinary: cloudinaryProvider({ cloudName: 'demo' })
  },
  presets: {
    avatar: { width: 96, height: 96, fit: 'cover', quality: 80 }
  }
});

<ds-image preset="avatar" src="/users/ada.jpg" alt="Ada" />

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

角 SSR 中的本地IPX

将图像中间软件置于静态文件和角 SSR 处理器之前:

import { createDsImageMiddleware } from '@desource/image-angular/server';

app.use(
  createDsImageMiddleware({
    dirs: [browserDistFolder],
    domains: ['images.example.com'],
    maxAge: 60 * 60 * 24 * 30
  })
);

将基于 Sharp 的优化器从 Angular 服务器捆绑出 :

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "externalDependencies": ["@desource/image-angular/server"]
          }
        }
      }
    }
  }
}

中间软件装入 ipx 懒惰,只处理请求 /_ipx。从服务器进程解析本地目录。 默认拒绝远程优化; 添加信任 domains,或设置 allowAllDomains: true 仅供有意公开优化者使用.

主机供应商生成平台URL,应当与该平台的图像配置相配对. 例如,使用有Vercel图像设置的Vercel提供者,而不是使用IPX中间软件.

链接

• 仓库
• 核心一揽子计划
• 反应软件包
• Svelte 软件包
• 安全政策

许可证

麻省理工学院,2026年