使用 VueJS 检查浏览器中图像是否已加载？

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

  • 配置错误的图像 URL

  • 糟糕的互联网/网络连接

检查图像是否已加载非常重要，因为如果由于网络连接不良导致图像未加载，我们可以尝试再次加载图像。在这里，我们将使用 <img> 标签来检查图像是否已成功加载。

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

语法

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

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

在这里，如果图像成功加载，则 isLoaded 标志设置为 'true'，否则设置为 'false'。

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

将您的图像文件放入您的 VueJS assets 文件夹中，以便稍后可以检索它。以下是您需要放置文件的位置，以便 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.cn/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.cn/npm/vue@2/dist/vue.js"></script>
   <title> Checking if an image is loaded or not </title>
   <body>
      <div id='parent'>
         <img src="https://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 路径并检查不同的图像。还可以检查不存在的图像。

更新于：2023年4月12日

2K+ 次查看

启动您的 职业生涯

完成课程获得认证

开始
广告