<picture> 元素的后备未触发答案

【问题标题】：Fallback of <picture> element not triggering<picture> 元素的后备未触发
【发布时间】：2020-08-04 14:41:35
【问题描述】：

我正在尝试使图片元素工作，但它不加载后备 img

   <div class="card">
        <picture>
            <source type="image/png" srcset="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555">
            <img class="card-img-top scale-on-hover" alt="Fallback" src="http://carscan.test/storage/images/no_image_found.jpg">
        </picture>

        <div class="card-body">
            <h6><strong>Location</strong>: Door LB</h6>
            <p><strong>Type</strong>: Window Crack <br>
            <strong>Severity damage</strong>: Medium</p>
        </div>
    </div>

在我的浏览器中，我在源 (aws) 元素上收到 403，但我希望它会转到备用图像。但相反，它向我显示了小 img 图标和我的 alt 文本

当我从元素中删除源项目时，我的 img 元素显示没有任何问题。我忘记了一个元素还是一个小字符？

【问题讨论】：

这是因为您的后备网址无效http://carscan.test/storage/images/no_image_found.jpg。使用其他图片
如果不是@Chilarai 所说的，请给我们一个可重现的例子。
img url 有效，否则删除源仍然会导致图像损坏codepen.io/killermonkey152/pen/oNxvKMq
<picture> 的目标不是在无法获取源的情况下提供后备。它是为不同的显示器/设备提供替代来源。

标签： html image

【解决方案1】：

试试这个作为替代方法

 <p>
    <object data="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555" type="image/png">
       <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
 </p>

【讨论】：

非常感谢：D