javascript动态改变img的src属性图片不显示的解决方法

当使用JavaScript动态改变img标签的src属性时，由于图片加载的延迟时间或者其他网络问题，有可能会导致图片无法正常显示。下面是改善这种情况的方法：

1. 图片加载完再显示

可以在图片载入完成后再显示图片，通过监听图片的 load 事件确保图片已成功加载，代码如下：

var img = document.getElementById('myImg');
img.onload = function() {
  // 图片加载成功后执行的代码
  // 显示图片
}
img.src = 'path/to/image.jpg'; // 设置图片路径

在这个例子中，我们检测了图片的 load 事件，当图片出现在页面中时，浏览器会尝试下载它。当图片下载完成时，load 事件会被触发，执行我们指定的回调函数，也就是显示图片的代码。

2. 加载占位图片

另一种方式是，可以先显示一个占位图片，然后在图片加载完成后再替换成真正的图片。代码如下：

<img id="myImg" src="path/to/placeholder.jpg">

var img = document.getElementById('myImg');
img.onload = function() {
  // 图片加载完成之后执行的代码
  // 替换占位图片到真正的图片
  img.src = 'path/to/image.jpg';
}
img.src = 'path/to/image.jpg'; // 加载真正的图片

这个方法可以在图片尚未加载完成之前为用户提供一个良好的用户体验，因为占位图片总是会立即出现，即使真正的图片需要一段时间才能被成功加载。

这两种方法都可以帮助解决js动态改变img的src属性图片不显示的问题。