Image图片

NG-ZORRO 实验性功能是指已发布但不稳定或者还未准备好用于生产环境的功能。

开发者或用户可以选择在正式发布前使用这些功能,但是每次发布版本时都可能存在 breaking changes

何时使用#

  • 需要浏览器优先加载图片时(需要在 SSR 下处理)。
  • 需要对高清显示器(如视网膜屏)优化时。
  • 使用图片 CDN 服务时。
  • 以及 Image documentation 中的功能
  • 下一步计划
    • 添加 sizes 属性及响应式的支持
import { NzImageModule } from 'ng-zorro-antd/experimental/image';

代码演示

设置 nzPriority 将会在服务端渲染(SSR) 时添加 <link rel="preload"> 标签,浏览器会将其视为高优先级资源加载。你可以在 MDN - Preloadingweb.dev - Preloading responsive images 了解更多。

需要注意的是,通常只需要为首屏图片设置 nzPriority 因此在循环生成的模版中只需要为靠前的子项添加即可,例如:

<ng-container *ngFor="let product of products; index as i">
  <nz-image
    [nzPriority]="i <= 8"
  ></nz-image>
</ng-container>
expand codeexpand code
加载中

自定义 nzSrcLoader 用于解析图片 URLs, 也可以使用内置的图片 CND 提供商的 Loaders。
我们建议始终指定图片的尺寸(nzWidthnzHeight),不仅可以帮助提高网页体验的关键指标 CLS,还可以配合 Loader 利用图片 CND 对图片进行优化处理提高加载速度。
如果希望在不同的环境下使用不同的 Loader 时你可以像下面这样做:

import { environment } from 'environments/environment';

import { NzConfig, NZ_CONFIG } from 'ng-zorro-antd/core/config';
import { aliObjectsLoader, defaultImageSrcLoader } from 'ng-zorro-antd/experimental/image';

const ngZorroConfig: NzConfig = {
  imageExperimental: {
    nzSrcLoader: environment.production ? aliObjectsLoader : defaultImageSrcLoader
  }
};

@NgModule({
  ...
  providers: [
    { provide: NZ_CONFIG, useValue: ngZorroConfig }
  ]
})
export class AppModule {}
expand codeexpand code
加载中

使用 nzAutoSrcset 时要求必须定义图片尺寸(nzWidthnzHeight),配合 Loader 为不同的像素密度自动生成 srcset

expand codeexpand code
加载中

API#

nz-image#

参数说明类型默认值支持全局配置
nzSrcurlstring-
nzAltaltstring-
nzWidth宽度number|stringauto
nzHeight高度number|stringauto
nzAutoSrcset是否优化图片加载booleanfalse
nzSrcLoader加载器NzImageSrcLoaderdefaultImageSrcLoader
nzPriority是否添加 preloadbooleanfalse

NzImageSrcLoader#

export type NzImageSrcLoader = (params: { src: string; width: number }) => string;

注意#

nzSrcLoader#

使用 nzSrcLoader 可以帮助你填充请求图片的关键信息,例如 srcsrcset,默认为:

export const defaultImageSrcLoader: NzImageSrcLoader = ({ src }) => {
  return src;
};

内置的图片 CND 创建方法


/**
 * AliObjectsLoader return format
 * {domain}/{src}?x-oss-process=image/resize,w_{width}
 */
export function createAliObjectsLoader(domain: string): NzImageSrcLoader;

/**
 * ImgixLoader return format
 * {domain}/{src}?format=auto&fit=max&w={width}
 */
export function createImgixLoader(domain: string): NzImageSrcLoader;

/**
 * CloudinaryLoader return format
 * {domain}/c_limit,q_auto,w_{width}/{src}
 */
export function createCloudinaryLoader(domain: string): NzImageSrcLoader;

响应式图片和预加载图片#

使用响应式图片可以帮助网页在不同的设备上显示良好的效果,预加载图片可以帮助你更快地加载图片,更多信息请参考: