如何在VueJS中检查图像是否已加载

在VueJS项目中插入图像时，可能由于以下原因而无法加载：

写错误的图像URL。
由于网络连接不稳定。
方法： 我们将使用<img>中的事件来检查在VueJS中是否已加载图像，我们将使用的事件是：
@load: 当图像加载完成时，@load事件将触发并执行相关操作。

项目设置：

步骤1： 在命令行中使用以下命令创建一个Vue项目：

vue create image-load

注意： 我们使用’image-load’作为项目名称，您可以根据自己的选择选择任何名称。

将创建’image-load’文件夹。
在代码编辑器中打开该文件夹。
项目结构将如下所示：

如何在VueJS中检查图像是否已加载

步骤2： 创建项目后，在’assets’文件夹中添加一个图像。我们添加了一个名为’gfg.png’的图像。

示例： 在此示例中，我们将按照以下步骤进行操作：

在此示例中，我们将在应用程序的首页上插入一个图像。
在项目“image-load”中，我们创建了一个名为’isLoaded’的数据变量，其默认值为“False”。
还创建了一个名为’description’的数据变量，用于保存页面的标题，即“How to check if an image is loaded in VueJs?”。
为图像分配一个’@load’事件。
事件的名称将为’loadImage’，其功能将是将’isLoaded’的值更改为“True”，如果图像已加载。
最后，我们将在首页上打印’isLoaded’的值和图像。

现在让我们逐步看看每一步的实现。

<template>
    <div>
        <h1>{{description}}</h1>
        <br>

        <img src="./assets/gfg.png" alt="" @load="loadImage">
        <h2>Image Loaded : {{isLoaded}} </h2>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                description: "How to check if Image "
                    + "is Loaded in Vue.js or not?",
                isLoaded: false,
            };
        },

        methods: {
            loadImage() {
                this.isLoaded = true;
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

运行应用程序： 在命令行中输入以下命令：