fix(components): [image] Display error content when picture loading fails (#11600)

* fix(components): [image] Add status attribute and set styles

* fix(components): [image] remove image wrapper container

* chore(components): [image] remove invalid test

* fix(components): [image] update

* chore(components): [image] Remove unwanted code and optimize code

* chore(components): [image] optimize code
This commit is contained in:
ljf1834 2023-04-09 16:11:26 +08:00 committed by GitHub
parent 611d11b371
commit d172535084
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 29 deletions

View File

@ -1,7 +1,11 @@
<template>
<div ref="container" :class="[ns.b(), $attrs.class]" :style="containerStyle">
<slot v-if="hasLoadError" name="error">
<div :class="ns.e('error')">{{ t('el.image.error') }}</div>
</slot>
<template v-else>
<img
v-if="imageSrc !== undefined && !hasLoadError"
v-if="imageSrc !== undefined"
v-bind="attrs"
:src="imageSrc"
:loading="loading"
@ -15,14 +19,12 @@
@load="handleLoad"
@error="handleError"
/>
<div v-if="isLoading || hasLoadError" :class="ns.e('wrapper')">
<slot v-if="isLoading" name="placeholder">
<div v-if="isLoading" :class="ns.e('wrapper')">
<slot name="placeholder">
<div :class="ns.e('placeholder')" />
</slot>
<slot v-else-if="hasLoadError" name="error">
<div :class="ns.e('error')">{{ t('el.image.error') }}</div>
</slot>
</div>
</template>
<template v-if="preview">
<image-viewer
v-if="showViewer"