fix(Image): should not render img when error

This commit is contained in:
chenjiahan 2020-10-09 19:39:50 +08:00
parent 8356831711
commit 59fb1d4dfc
2 changed files with 10 additions and 8 deletions

View File

@ -120,7 +120,7 @@ app.use(Lazyload);
| cover | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边 | | cover | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边 |
| fill | 拉伸图片,使图片填满元素 | | fill | 拉伸图片,使图片填满元素 |
| none | 保持图片原有尺寸 | | none | 保持图片原有尺寸 |
| scale-down | 取`none``contain`中较小的一个 | | scale-down | 取 `none` `contain` 中较小的一个 |
### Events ### Events

View File

@ -1,14 +1,16 @@
import { ref, watch, computed } from 'vue'; import { ref, watch, computed, PropType } from 'vue';
import { createNamespace, isDef, addUnit } from '../utils'; import { createNamespace, isDef, addUnit } from '../utils';
import Icon from '../icon'; import Icon from '../icon';
const [createComponent, bem] = createNamespace('image'); const [createComponent, bem] = createNamespace('image');
export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
export default createComponent({ export default createComponent({
props: { props: {
src: String, src: String,
fit: String,
alt: String, alt: String,
fit: String as PropType<ImageFit>,
round: Boolean, round: Boolean,
width: [Number, String], width: [Number, String],
height: [Number, String], height: [Number, String],
@ -40,7 +42,7 @@ export default createComponent({
const imageRef = ref(); const imageRef = ref();
const style = computed(() => { const style = computed(() => {
const style = {}; const style: Record<string, unknown> = {};
if (isDef(props.width)) { if (isDef(props.width)) {
style.width = addUnit(props.width); style.width = addUnit(props.width);
@ -66,12 +68,12 @@ export default createComponent({
} }
); );
const onLoad = (event) => { const onLoad = (event: Event) => {
loading.value = false; loading.value = false;
emit('load', event); emit('load', event);
}; };
const onError = (event) => { const onError = (event: Event) => {
error.value = true; error.value = true;
loading.value = false; loading.value = false;
emit('error', event); emit('error', event);
@ -103,7 +105,7 @@ export default createComponent({
}; };
const renderImage = () => { const renderImage = () => {
if (props.error || !props.src) { if (error.value || !props.src) {
return; return;
} }
@ -116,7 +118,7 @@ export default createComponent({
}; };
if (props.lazyLoad) { if (props.lazyLoad) {
return <img ref={imageRef} vLazy={props.src} {...attrs} />; return <img ref={imageRef} v-lazy={props.src} {...attrs} />;
} }
return ( return (