提问者:小点点

<picture>元素的回退未触发


我试图使一个图片元素工作,但它没有加载回退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>

在我的浏览器中,我在source(aws)元素上得到一个403,但是我希望它转到回退图像。 但是它显示了我的小img图标和我的alt文本

当我从元素中移除源项时,img元素就会显示出来,没有任何问题。 我是忘了一个元素还是一个小字符?


共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>