通过VueJS检查浏览器上的图像是否已加载

每当我们在任何系统的前端插入图像时，向用户展示适当的数据和图像以提升用户体验非常重要。在任何项目中，图像基本上是从远程路径URL或应用程序中加载的。以下情况下可能无法正确加载图像：

配置错误的图像URL
网络连接差 / 网络连接断开

检查图像是否已加载非常重要，因为如果由于网络连接差而无法加载图像，我们可以尝试重新加载图像。在这里，我们将使用<img> 标签来检查图像是否成功加载。

@load - 当图像加载完成并执行时触发此事件。在图像成功加载之前，它不会被执行。

语法

以下是我们可以使用Vue.js来检查图像是否已加载的语法：

data () {
   return {
      isLoaded: false
   }
},
methods: {
   onImgLoad () {
      this.isLoaded = true
   }
}

在这里，如果图片成功加载， isLoaded 标志被设置为 ‘true’ ，否则设置为 ‘false’ 。

示例：检查图片是否已加载

将您的图片文件放在vueJs资产文件夹中，以便以后检索。以下是您需要将文件放置的路径，以便vueJS能够读取它。

Directory Structure – $Project_name
               |--- public
                        |--- ** Place your file here **

复制并粘贴以下代码片段到您的Vue项目中，并运行该Vue项目。您将在浏览器窗口中看到以下输出。

文件名 – app.js
目录结构 – $project/public – app.js

// Calling the function- onImgLoad() when image is loaded
const parent = new Vue({
   el: "#parent",
   data () {
      return {
         isLoaded: false
      }
   },
   methods: {
      onImgLoad () {
         this.isLoaded = true
      }
   }
})

文件名 – index.html
目录结构 — $project/public — index.html

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
   <title> Checking if an image is loaded or not </title>
   <body>
      <div id='parent'>
         <img src="tutorialspoint.png" alt="Image" @load="onImgLoad">
         <h2>Image Loaded : {{isLoaded}} </h2>
      </div>
      <script src='app.js'></script>
   </body>
</html>

运行以下命令以获取以下输出-

C://my-project/ > npm run serve

完整的带有HTML的代码

以下是带有HTML的完整代码。我们将app.js和index.html合并为一个文件。现在你可以将下面的代码作为一个HTML文件运行。

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <title> Checking if an image is loaded or not </title>
   <body>
      <div id='parent'>
         <img src="https://www.tutorialspoint.com/static/images/logo-color.png" alt="Image" @load="onImgLoad">
         <h2>Image Loaded : {{isLoaded}} </h2>
      </div>
      <script>

         // Calling the function- onImgLoad() when image is loaded
         const parent = new Vue({
            el: "#parent",
            data () {
               return {
                  isLoaded: false
               }
            },
            methods: {
               onImgLoad () {
                  this.isLoaded = true
               }
            }
         })
      </script>
   </body>
</html>

当图像成功加载时，显示消息为“图像加载：true”，否则显示“图像加载：false”。

您可以更改图像的src路径并检查不同的图像。还可以检查一个不存在的图像。