反应没有通过 src 获取 img - Javascript

问题描述

在使用 Javascript 加载图片时，有时会遇到图片无法正常加载的情况。在调试过程中我们发现，图片的 src 属性没有被正确设置，导致无法获取到图片。

可能原因

以下是导致图片无法正常加载的一些可能原因：

1.图片路径设置错误

如果 src 属性设置的路径不正确，浏览器就无法成功获取到图片，这时可以通过检查图片路径是否正确来解决。

2.图片未完全加载

有时浏览器需要一些时间来加载图片，如果我们在图片尚未完全加载时就尝试获取图片，就会出现获取失败的情况。这时可以通过等待图片完全加载完成再尝试获取图片。

3.图片跨域了

如果图片跨域了，浏览器默认是不能够获取到图片的，这时需要使用一些特殊的方式来获取跨域图片。

解决方法

以下是解决获取图片失败的一些方法：

1.检查图片路径是否正确

我们可以通过检查图片路径是否正确，查看图片是否被正确的引用，如果路径有误，需要修正路径，才能正常加载图片。

document.querySelector('img').src = 'path/to/image.jpg'; //正确路径

document.querySelector('img').src = 'path/to/image'; //错误路径

2. 等待图片加载完成后再获取

我们可以等待图片加载完毕后再进行操作，这样就可以避免在图片尚未加载完成时尝试获取图片的失败情况。

const imgEl = document.querySelector('img');
imgEl.addEventListener('load', () => {
  console.log('图片加载成功');
  // 在这里对图片进行操作
});

3. 使用代理服务器获取跨域图片

如果我们需要获取的图片跨域了，可以通过使用代理服务器来实现。

const imgEl = document.querySelector('img');
const imgUrl = 'http://image.crossdomain.com/image.jpg';
const proxyUrl = 'http://localhost:8080/getImg?url=' + encodeURIComponent(imgUrl);

imgEl.src = proxyUrl;

总结

以上是获取图片失败的可能原因和解决方法，我们在开发时需要注意以上问题，避免出现获取图片失败的情况。