使用onerror服务于不支持浏览器的.webp图像是否安全？

Question

我正在尝试提供.webp图片，但是某些浏览器不支持.webp扩展名，我搜索了arround，但没有找到真正的解决方案。

js有一些解决方案，但它们会导致渲染阻塞错误。

我之前使用过onerror，我认为它是5.5+和Safari 5.1+，可以正常运行。

我试图以错误的方式提供.webp图像，它在歌剧，safari Lates ver，chrome（例如10）中正常运行，并且没有造成任何问题，didint尝试了safari。

我想知道浏览器是否可以安全使用？

这是我在引导滑块中使用它的方式。

<img src="images/posts/dc.webp" onerror="this.src = 'images/posts/dc.png'" class="img-fluid"/>

Answer 1

非js解决方案怎么样？

<picture>
  <source srcset="images/posts/dc.webp" type="image/webp">
  <img src="images/posts/dc.png">
</picture>

Answer 2

我有解决方案或理解我的错误，为什么我的代码无法正常工作。我的代码在滑块中不起作用，因为我向srcset都动态添加了相同类型的图像，这就是为什么它不起作用的原因。

这里是解决方法：

我从数据库中获得$image，然后从中获得exlode();，仅获得没有扩展的名称，如下所示：

$file_name = $row['img'];
$image = explode('.',$file_name);

并添加为这样：

<source srcset="uploads/large/<?php echo htmlspecialchars($image[0]);?>.webp" type="image/webp">

<img src="uploads/large/<?php echo htmlspecialchars($row['img']);?>" alt="<?php echo htmlspecialchars($row['title']);?>" class="img-fluid"/>

现在看起来工作完美，这个问题可能会对某人有所帮助。