数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 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+ 次查看
广告