js--判断图片资源是否存在
时间: 2023-11-08 11:03:37 浏览: 65
在 JavaScript 中,可以使用 `Image` 对象来判断图片资源是否存在。具体做法如下:
1. 创建一个 `Image` 对象。
```
const img = new Image();
```
2. 给 `Image` 对象设置 `src` 属性,并监听 `load` 和 `error` 事件。
```
img.src = '图片路径';
img.onload = function() {
console.log('图片存在');
};
img.onerror = function() {
console.log('图片不存在');
};
```
3. 判断图片资源是否存在。
如果图片资源存在,`onload` 事件会被触发,如果图片资源不存在,`onerror` 事件会被触发。
完整的代码如下:
```
const img = new Image();
img.src = '图片路径';
img.onload = function() {
console.log('图片存在');
};
img.onerror = function() {
console.log('图片不存在');
};
```
相关问题
vue--判断图片资源是否存在
可以使用 JavaScript 中的 Image 对象来判断图片资源是否存在。
具体实现方法如下:
1. 创建一个 Image 对象。
2. 将图片的 URL 赋给 Image 对象的 src 属性。
3. 监听 Image 对象的 load 和 error 事件。
4. 在 load 事件中,表示图片资源存在,可以进行相应的操作。
5. 在 error 事件中,表示图片资源不存在,可以进行相应的操作。
代码示例:
```javascript
function checkImgExist(imgUrl) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = function() {
resolve(true);
};
img.onerror = function() {
reject(false);
};
img.src = imgUrl;
});
}
// 使用方法
checkImgExist('https://example.com/image.png')
.then(result => {
console.log('图片资源存在');
// 执行相应的操作
})
.catch(error => {
console.log('图片资源不存在');
// 执行相应的操作
});
```
在上述代码中,checkImgExist 函数返回一个 Promise 对象,resolve 表示图片资源存在,reject 表示图片资源不存在。使用时,可以使用 then 方法和 catch 方法分别处理 resolve 和 reject 的结果。
js判断mixed content
在JavaScript中,可以使用MixedContentChecker API来判断混合内容(mixed content)。
所谓混合内容是指在使用HTTPS安全协议的网页上加载使用HTTP不安全协议的资源,例如图片、脚本或样式表等。这可能导致安全隐患,因为HTTP协议不具备加密传输数据的能力,可能被恶意攻击者拦截或篡改。
MixedContentChecker API提供的方法可以检测网页中是否存在混合内容。下面是一个简单的示例:
```javascript
if (navigator.maxTouchPoints > 0) {
navigator.permissions.query({ name: 'geolocation' })
.then(result => {
if (result.state === 'granted' || result.state === 'prompt') {
checkMixedContent();
}
});
} else {
checkMixedContent();
}
function checkMixedContent() {
if (document.images) {
const images = document.images;
for (let i = 0; i < images.length; i++) {
if (images[i].src.startsWith('http://')) {
console.warn('存在混合内容:', images[i].src);
}
}
}
// 同样的方法可以应用到其他资源,如脚本、样式表等
}
```
以上代码首先通过navigator.permissions.query()方法获取用户位置权限,之后再调用checkMixedContent()方法检查混合内容。在检查时,可以遍历网页中所有的图片(也可以通过类似的方式检查其他资源),如果某个图片的src属性以http://开头,则可以判断为存在混合内容,并通过console.warn()方法打印出来。
通过使用MixedContentChecker API,开发人员可以轻松地判断混合内容,并采取相应的措施,例如修改资源链接为HTTPS,或者通过代理服务器将HTTP请求转换为HTTPS请求等,以保证网页的安全性。