Блог

Таким образом, у нас есть проект класса для этого загрузчика компонентов изображения, который сообщает пользователю, загружается ли изображение, загружено ли оно и ошибка при загрузке.

 <ImageLoader> 
  <img slot="image" :src="iamge.path" />
    <div slot="preloader" >
      <p>Image is loading!</p>
    </div>
    <div slot="error"> 
      <p>Error! Image Didn't load</p>
    </div>
</ImageLoader>
 

Сам компонент является:

 <template>
    <div class="load-image">
        <slot v-if="status === 'loaded'" name="image" />
        <slot v-else-if="status ==='failed'" name="error"/>
        <slot v-else-if="status ==='loading'" name='preloader'/>

    </div>
</template>

<script>
const Status = {
    PENDING: "pending",
    LOADING: "loading",
    LOADED: "loaded",
    FAILED: "failed"
}


export default {
    data: () => ({
        status: null,
        img: null,
        src: null,
    }),
    created() {
        const { attrs } = this.$slots.image[0].data;
        this.src = attrs.src || attrs["data.src"];
        if(this.src) {
            this.status = Status.LOADING;
            this.crossOrigin = attrs.crossorigin;
            this.createLoader();
            return;
        }
        if(this.src === undefined) {
            this.status = Status.FAILED
            return;
        }
        this.status = Status.PENDING;
    },
    updated() {
        const { attrs } = this.$slots.image[0].data;
        const receivedSrc = attrs.src || attrs["data.src"];
        if(this.status === Status.LOADING amp;amp; !this.img) {
            this.createLoader();
            return;
        }
        if(this.src !== receivedSrc) {
            this.src = receivedSrc;
            this.crossOrigin = attrs.crossorigin;
            this.createLoader()
        }
    },
    watch: {
        src(value) {
            this.status = value ? Status.LOADING : Status.Pending;
        },
    },
    methods: {
        createLoader() {
            this.destroyLoader();
            this.img= new Image();
            this.img.onload = this.handleLoad;
            this.img.onerror = this.handleError;
            this.img.crossOrigin = this.crossOrigin;
            this.img.src = this.src;
        },
        destroyLoader() {
            if (this.img){
                this.img.onload = null;
                this.img.onerror = null;
                this.img = null
            }
        },
        handleLoad() {
            this.destroyLoader();
            this.status =   Status.LOADED;
            this.$emit("onLoad");
        },
        handleError(error) {
            this.destroyLoader();
            this.status = Status.FAILED;
            this.$emit("onError", error);
            console.log(error)
        }
    }
}
</script>
 

Мы планируем поместить кнопку «Перезагрузить это изображение» в слот для ошибок. Однако,
Как бы мы перезагрузили изображение, если изображение не загружается? Перезагружаем ли мы весь компонент целиком? Или есть какая-то техника, которую мы упускаем из виду?