问题标签 [html5-img]

参考这篇文章：https ://cloudinary.com/blog/evolution_of_img_gif_without_the_gif

2020年img中视频的兼容性情况如何？我不知道要在 caniuse 中查找的功能名称是什么。

• 现在你可以<img src=".mp4">在 Safari 技术预览
• 早期结果显示，标签中的 mp4 显示速度比 GIF 等价物快 20 倍，解码速度快 7 倍 - 除了文件大小的 1/14！
• 现在我们等待其他浏览器赶上

第一次在这里发帖。我知道内联 php 不是首选，但我还没有将所有脚本转换为 echo json_encoded 数组以在客户端的 javascript 中工作......所以现在，我有内联 php。

我不知道用户上传媒体的扩展名，因为它可能是 jpg、mp4 等，并且在上传时它会以用户 ID 作为标识符进入媒体文件夹。

当我的用户第一次加载 div（和 html 页面）时，php 脚本循环遍历一个数组并每次从 sql 查询到数据库执行 fetch_assoc；它返回 (media_id #) 并打印出一个 li，其中相应的媒体显示在查询中的其他一些值旁边。

我只知道 (media_id) 和不带扩展名的文件路径名。当页面首次加载时，一切正常，并且 file_exists 函数正确返回。

问题

当我 AJAX div 并再次执行查询时，因为用户在数据库中添加了一行，新列表会打印出所有信息，但是 file_exists 函数无法识别与以前完全相同的路径，我没有页面上的图像或视频。

我从原始 div 复制/粘贴完全相同的代码，并将其放在一个文件中供 ajax 重新查询和打印新的 li。

所有变量都是相同的，当我对测试文件路径进行硬编码时，它打印得很好。也许有一个缓存问题？

编码

我可以就如何解决这个问题以及如何在未知媒体类型上打印适当的媒体标签提出一些建议。

输出

调试尝试

<img>在标签中回显已知图像的确切文件路径可以正常工作。放入echo'test';file_exists 案例什么都不做。

--

解决方案（种类）

所以我之前使用过 html 的 onerror 并且我找到了一种解决方法，尽管我仍然想知道为什么会出现错误。PSA 这使用JQuery，但javascript 也可以：

我的解决方案

我正在尝试将图像添加到 html5 代码中。

我有包含具有 2 个“src”属性的图像标签的 HTML 页面，我想使用 BS 来提取第一个“src”而不是第二个“src”。

例如：

当我按如下方式使用BS时：

我得到的路径是第二个 src “ https://www.mdf.qa/media/catalog/product/cache/1/image/800x800/9df78eab33525d08d6e5fb8d27136e95/b/l/black_2.jpg ” 但我需要第一个src - https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh； 0,0.190xh&resize=980 :* 。

有没有办法在不出现提示的情况下将画布图像下载到文件夹？我找到了需要提示您命名文件的解决方案，但我没有找到任何可以动态命名图像并保存到本地文件的解决方案。我对前端开发非常陌生，所以我对 Node.js 或 JQuery/PHP/Ajax 并不完全熟悉。我找到了使用这些的解决方案，但他们最终仍然使用提示。

似乎不是为每个图片源计算纵横比，而是从 img 标签本身获取。这可以防止插件在具有不同纵横比的艺术指导模式下工作。

小提琴以查看实际代码： https ://jsfiddle.net/roberthenniger/o6qzsh9m/

想知道这是预期的行为还是错误的配置。文档不清楚如何结合宽度计算使用响应图像的数据纵横比。

检查了lazysizes 文档和其他链接，例如：

似乎lazysizes 总是选择 1000x 宽度配置文件，而不是根据元素的实际宽度计算大小。

我正在使用带有摄像头的 Arduino Esp32 将视频流式传输到我创建的网页中。Esp32 大约一个小时后关闭，因此页面需要刷新才能恢复流（当没有可用图像时，窗口仅显示符号）。

所以我想要一个重新打开图像视频流的按钮，我尝试了各种方法都没有成功。一个问题是 Esp32 是 HTTP 服务器而不是 HTTPS。

问题：
我想要一个打开/关闭图像的按钮，如果它已经打开则刷新它。这是我的代码：