如果图片不存在，则更新img src

8 浏览
0 Comments

如果图片不存在，则更新img src

我有两个可能显示的图片。如果第一张存在，就显示它；如果不存在，则显示第二张。这段代码将在多个页面中显示，所以如果第一张图片不存在，它将以"undefined"或"unknown"作为src显示。因此，我需要指定这两个情况。我尝试了以下方法，但一旦我添加了"or unknown"，它就会出错：

    
    


$(document).ready(function() {
  var imageDef = $("#topBannerG.groupImageHidden img");
  if (typeof imageDef == "undefined" || typeof imageDef === "unknown") {
    var imgHref = $('.groupImage img').attr("src");
    $('#section-heading').prepend(' ');
  } else {
    var imgTopHref = $('#topBannerG img').attr("src");
    $('#section-heading').prepend(' ');
  }
});

0

2 答案

0 Comments

当网页中的图片无法加载时，可以通过更新图片的src来显示另一张可用的图片。在以上代码中，img标签的src属性被设置为一个不存在的图片路径invalid.jpg。为了解决这个问题，我们可以使用JavaScript添加一个error处理程序，当图片加载失败时调用该处理程序。在处理程序中，我们可以将src更新为一个可用的图片路径https://i.imgur.com/CbsGGVp.jpg。

具体的解决方法如下：

1. 首先，在页面中引入jQuery库：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. 在需要更新图片的位置，使用img标签，并设置src为一个不存在的图片路径：<img src="invalid.jpg" />

3. 使用jQuery选择器选中图片，并为其添加一个error处理程序：

$('#topBannerG img').on('error', function() {
  this.src = 'https://i.imgur.com/CbsGGVp.jpg';
});

4. 当图片加载失败时，error处理程序会被触发，将src更新为可用的图片路径。

通过以上步骤，我们可以在图片加载失败时更新src，以显示一张可用的图片。这样可以确保网页上的图片始终能够正常显示，提升用户体验。

0
0 Comments

当页面加载完成时，执行以下代码：

首先，通过document.querySelectorAll方法获取所有id为"topBannerG"，class为"groupImageHidden"的div元素下的img元素，并存储在imageDef1变量中。

然后，使用forEach方法遍历imageDef1数组中的每个img元素。对于每个img元素，检查其src属性是否为空或为""。如果是，则将imgHref变量设为'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpFBWqwBWz1PssMHzubdkMu9dMhzd1HCScBqc0ReHNeCDvtYStWA'，然后在id为"section-heading"的元素前插入以下代码：

如果img元素的src属性不为空，则将imgTopHref变量设为img元素的src属性值，然后在id为"section-heading"的元素前插入以下代码：

以上就是代码的逻辑。这段代码的目的是检查页面中id为"topBannerG"，class为"groupImageHidden"的div元素下的img元素的src属性是否为空。如果为空，则将其src属性设为指定的默认图片链接。如果不为空，则保持不变。

这段代码的问题在于，它使用了错误的选择器语法，应该使用$("#topBannerG.groupImageHidden img")而不是document.querySelectorAll("#topBannerG.groupImageHidden img")。另外，还存在重复使用了相同id值的div元素的问题。

要解决这个问题，可以将选择器语法修改为$("#topBannerG.groupImageHidden img")。此外，还应该确保页面中的id值唯一，不要重复使用相同的id值。

以下是修改后的代码示例：

以上是对"Update img src if image does not exist"这个问题的原因和解决方法的整理。

0