feat(Image and Avatar): add onError and objectFit props

CHANGELOG.en-US.md

@@ -9,6 +9,10 @@
 - `n-slider` add `format-tooltip` prop.
 - `n-upload` add `event` in `on-finish` callback params.
 - `n-rate` add `readonly` prop.
+- `n-avatar` add `on-error` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394).
+- `n-image` add `o-error` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394).
+- `n-image` add `object-fit` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394).
+- `n-avatar` add `object-fit` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394).
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -10,6 +10,10 @@
 - `n-upload` 在 `on-finish` 回调参数中新增 `event`
 - `n-slider` 新增 `format-tooltip` 属性
 - `n-rate` 新增 `readonly` 属性
+- `n-avatar` 新增 `on-error` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394)
+- `n-image` 新增 `o-error` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394)
+- `n-image` 新增 `object-fit` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394)
+- `n-avatar` 新增 `object-fit` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394)
 
 ### Fixes
 

src/avatar/src/Avatar.tsx

@@ -26,11 +26,18 @@ const avatarProps = {
     type: Boolean,
     default: false
   },
+  color: String,
+  objectFit: {
+    type: String as PropType<
+    'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    >,
+    default: 'fill'
+  },
   round: {
     type: Boolean,
     default: false
   },
-  color: String
+  onError: Function as PropType<(e: Event) => void>
 } as const
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
@@ -82,7 +89,7 @@ export default defineComponent({
       selfRef,
       mergedClsPrefix: mergedClsPrefixRef,
       cssVars: computed(() => {
-        const { size, round, circle } = props
+        const { size, round, circle, objectFit } = props
         const {
           self: { borderRadius, fontSize, color },
           common: { cubicBezierEaseInOut }
@@ -98,7 +105,8 @@ export default defineComponent({
           '--border-radius': round || circle ? '50%' : borderRadius,
           '--color': color,
           '--bezier': cubicBezierEaseInOut,
-          '--size': height
+          '--size': height,
+          '--object-fit': objectFit
         }
       })
     }
@@ -112,7 +120,7 @@ export default defineComponent({
         style={this.cssVars as any}
       >
         {!$slots.default && src ? (
-          <img src={src} />
+          <img src={src} onError={(e) => this.onError?.(e)} />
         ) : (
           <span
             ref="textRef"

src/avatar/src/styles/index.cssr.ts

@@ -24,6 +24,7 @@ export default cB('avatar', `
   c('img', `
     width: 100%;
     height: 100%;
+    object-fit: var(--object-fit)
   `),
   cE('text', `
     white-space: nowrap;

src/avatar/tests/Avatar.spec.tsx

@@ -118,4 +118,30 @@ describe('n-avatar', () => {
     )
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('image avatar error handle when load failed', () => {
+    const onError = jest.fn()
+    try {
+      mount(NAvatar, {
+        props: {
+          src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07.jpeg',
+          onError
+        }
+      })
+    } catch (error) {
+      expect(onError).toHaveBeenCalled()
+    }
+  })
+
+  it('should work with `objectFit` prop', () => {
+    const wrapper = mount(NAvatar, {
+      props: {
+        src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+        objectFit: 'contain'
+      }
+    })
+    expect(wrapper.find('.n-avatar').attributes('style')).toContain(
+      '--object-fit: contain;'
+    )
+  })
 })

src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`n-avatar avatar adjust text 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\">adjust text</span></span>"`;
+exports[`n-avatar avatar adjust text 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; --object-fit: fill;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\">adjust text</span></span>"`;
 
-exports[`n-avatar custom style 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; background-color: red;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
+exports[`n-avatar custom style 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; --object-fit: fill; background-color: red;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
 
-exports[`n-avatar icon avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"><i role=\\"img\\" class=\\"n-icon\\" style=\\"--bezier: cubic-bezier(.4, 0, .2, 1);\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 512 512\\"><rect x=\\"32\\" y=\\"80\\" width=\\"448\\" height=\\"256\\" rx=\\"16\\" ry=\\"16\\" transform=\\"rotate(180 256 208)\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M64 384h384\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M96 432h320\\"></path><circle cx=\\"256\\" cy=\\"208\\" r=\\"80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></circle><path d=\\"M480 160a80 80 0 0 1-80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 160a80 80 0 0 0 80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M480 256a80 80 0 0 0-80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 256a80 80 0 0 1 80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path></svg></i></span></span>"`;
+exports[`n-avatar icon avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; --object-fit: fill;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"><i role=\\"img\\" class=\\"n-icon\\" style=\\"--bezier: cubic-bezier(.4, 0, .2, 1);\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 512 512\\"><rect x=\\"32\\" y=\\"80\\" width=\\"448\\" height=\\"256\\" rx=\\"16\\" ry=\\"16\\" transform=\\"rotate(180 256 208)\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M64 384h384\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M96 432h320\\"></path><circle cx=\\"256\\" cy=\\"208\\" r=\\"80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></circle><path d=\\"M480 160a80 80 0 0 1-80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 160a80 80 0 0 0 80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M480 256a80 80 0 0 0-80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 256a80 80 0 0 1 80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path></svg></i></span></span>"`;
 
-exports[`n-avatar image avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px;\\"><img src=\\"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg\\"></span>"`;
+exports[`n-avatar image avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; --object-fit: fill;\\"><img src=\\"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg\\"></span>"`;
 
-exports[`n-avatar round avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 50%; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
+exports[`n-avatar round avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 50%; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; --object-fit: fill;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
 
-exports[`n-avatar size is number 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 50px;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
+exports[`n-avatar size is number 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 50px; --object-fit: fill;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
 
-exports[`n-avatar size is string 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;
+exports[`n-avatar size is string 1`] = `"<span class=\\"n-avatar\\" style=\\"--font-size: 14px; --border-radius: 3px; --color: rgba(204, 204, 204, 1); --bezier: cubic-bezier(.4, 0, .2, 1); --size: 34px; --object-fit: fill;\\"><span class=\\"n-avatar__text\\" style=\\"transform: translateX(-50%) translateY(-50%) scale(1);\\"></span></span>"`;

src/image/src/Image.tsx

@@ -5,7 +5,8 @@ import {
   ref,
   PropType,
   toRef,
-  mergeProps
+  mergeProps,
+  computed
 } from 'vue'
 import NImagePreview from './ImagePreview'
 import type { ImagePreviewInst } from './ImagePreview'
@@ -29,9 +30,16 @@ const imageProps = {
   alt: String,
   height: [String, Number] as PropType<string | number>,
   imgProps: Object as PropType<imgProps>,
+  objectFit: {
+    type: String as PropType<
+    'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    >,
+    default: 'fill'
+  },
   width: [String, Number] as PropType<string | number>,
   src: String,
-  showToolbar: { type: Boolean, default: true }
+  showToolbar: { type: Boolean, default: true },
+  onError: Function as PropType<(e: Event) => void>
 }
 
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
@@ -64,7 +72,13 @@ export default defineComponent({
         previewInst.setPreviewSrc(props.src)
         previewInst.setThumbnailEl(imageRef.value)
         previewInst.toggleShow()
-      }
+      },
+      cssVars: computed(() => {
+        const { objectFit } = props
+        return {
+          '--object-fit': objectFit
+        }
+      })
     }
   },
   render () {
@@ -74,7 +88,8 @@ export default defineComponent({
       'div',
       mergeProps(this.$attrs, {
         role: 'none',
-        class: `${mergedClsPrefix}-image`
+        class: `${mergedClsPrefix}-image`,
+        style: this.cssVars
       }),
       <img
         {...imgProps}
@@ -86,6 +101,7 @@ export default defineComponent({
         alt={this.alt ? this.alt : imgProps.alt}
         aria-label={this.alt ? this.alt : imgProps.alt}
         onClick={this.handleClick}
+        onError={(e) => this.onError?.(e)}
       />
     )
 

src/image/src/styles/index.cssr.ts

@@ -73,6 +73,9 @@ export default c([
     display: inline-flex;
     cursor: pointer;
   `, [
-    c('img', 'border-radius: inherit;')
+    c('img', `
+      border-radius: inherit;
+      object-fit: var(--object-fit)
+    `)
   ])
 ])

src/image/tests/Image.spec.tsx

@@ -91,4 +91,30 @@ describe('n-image', () => {
     })
     expect(wrapper.find('[data-cool]').exists()).toEqual(true)
   })
+
+  it('should work with `onError` prop', () => {
+    const onError = jest.fn()
+    try {
+      mount(NImage, {
+        props: {
+          src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07.jpeg',
+          onError
+        }
+      })
+    } catch (error) {
+      expect(onError).toHaveBeenCalled()
+    }
+  })
+
+  it('should work with `objectFit` prop', () => {
+    const wrapper = mount(NImage, {
+      props: {
+        src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+        objectFit: 'contain'
+      }
+    })
+    expect(wrapper.find('.n-image').attributes('style')).toContain(
+      '--object-fit: contain;'
+    )
+  })
 })