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

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

• 写入错误的图像 URL。
• 由于连接不良

方法：我们将在 中使用一个事件来检查 VueJS 中是否加载了图像，我们将使用的事件是：

• @load：当图像被加载并被执行时，@load 事件被触发。

项目设置：

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

vue create image-load

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

• 将创建“图像加载”文件夹。
• 在代码编辑器中打开该文件夹。

项目结构将如下所示：

第 2 步：创建项目后，在“资产文件夹”中添加图像。我们添加了一个名为“ gfg.png ”的图像

示例：在此示例中，我们将执行以下步骤：

1. 在此示例中，我们将在应用程序的索引页面上插入图像。
2. 在项目“ image-load ”中，我们创建了一个默认值为“ False ”的数据变量“ isLoaded ”。
3. 还创建了一个“描述”数据变量，它包含页面的标题，即“如何检查图像是否在 VueJs 中加载？”。
4. 将“ @load ”事件分配给图像。
5. 事件的名称将是' loadImage '，它的函数是在图像被加载时将' isLoaded '的值更改为“ True ”。
6. 最后，我们将在我们的主页上打印“ isLoaded ”的值，以及 Image。

现在让我们一步一步地看一下实现。

App.vue

  

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

  

    #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;
    }

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

npm run serve

输出：打开浏览器并访问http://localhost:8080/ ，您将看到以下输出：

说明：如我们所见，我们最初将“ isLoaded ”初始化为False 。图像被加载，“ isLoaded ”被分配一个True值，然后“isImageLoaded”值被提取并在输出期间与图像一起显示。