我们可以在HTML中的同一图像中添加多个SRC URL吗?

Question

我想使用HTML添加多个SRC URL。那甚至可能吗？

Answer 1

这不能单独使用HTML完成，但是您可以将 Global Event Handler onerror用作链接JSfiddle和下面的嵌入式代码段。

注意：关于下面的演示，将文件膜更改为指定的图像源以观察调整后的行为。

jsfiddle示范

代码片段演示：

<img src="https://placehold.it/500x500?text=img-1" 
     onError="this.onerror=null; /* to prevent infinite loops */
     
              this.src='https://placehold.it/500x500?text=img-2'; /* default */
              /* first condition */
              if (this.src != 'https://placehold.it/500x500?text=img-2') {
                  this.src='https://placehold.it/500x500?text=img-3';
                  
                  /* second condition */
                  if (this.src != 'https://placehold.it/500x500?text=img-3') {
                      this.src='https://placehold.it/500x500?text=img-4';
                      
                      /* third condition */
                       if (this.src != 'https://placehold.it/500x500?text=img-4') {
                           this.src='https://placehold.it/500x500?text=img-5'
                       }
                  }
              } 
">

有关globaleventhandlers.onerror

Answer 2

与CSS，我不这么认为，但是使用JavaScript？是的，如果您希望用户在单击该图像中单击时将其打开多个链接，

//jquery
$('img').click(function(e) {
   window.open('http://yoururl1.com');
   window.open('http://yoururl2.com');
   e.preventDefault();
});

Answer 3

您可以尝试图片标签

    <picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>