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 ”的数据变量，用于保存页面的标题，即“如何在VueJs中检查图像是否已加载？”。
为图像分配一个名为“ @load ”的事件。
事件的名称将为“ loadImage ”，其功能是在图像加载完毕时将“ isLoaded ”的值更改为“ True ”。
最后，我们将在主页上打印“ isLoaded ”的值和图像。

现在让我们逐步查看每个步骤的实现。

App.vue

<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>

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