微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 React 中,当 SVG 链接有效但图像损坏时显示后备图像

如何解决在 React 中,当 SVG 链接有效但图像损坏时显示后备图像

使用 React 或普通的旧 HTML,有没有办法验证指向 SVG 的链接是否有效,或者我们是否应该使用后备图像?

我们使用提供特定数据元素和 SVG 徽标的数据馈送。问题是有时他们的 SVG 代码搞砸了,无法呈现。

如果我尝试打开这些损坏的 SVG 之一的链接,我会在页面上看到代码,如下所示

<svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.1875 29.4375H31.625V25.5C31.625 24.5859 30.8516 23.8125 29.9375 23.8125H28.8125V13.125H25.4375V23.8125H22.0625V13.125H18.6875V23.8125H15.3125V13.125H11.9375V23.8125H8.5625V13.125H5.1875V23.8125H4.0625C3.07812 23.8125 2.375 24.5859 2.375 25.5V29.4375H1.8125C0.828125 29.4375 0.125 30.2109 0.125 31.125V32.25C0.125 32.6016 0.335938 32.8125 0.6875 32.8125H33.3125C33.5938 32.8125 33.875 32.6016 33.875 32.25V31.125C33.875 30.2109 33.1016 29.4375 32.1875 29.4375ZM28.25 29.4375H5.75V27.1875H28.25V29.4375ZM33.3125 6.79688L18.0547 0.398438C17.7734 0.328125 17.2812 0.1875 17 0.1875C16.6484 0.1875 16.1562 0.328125 15.875 0.398438L0.617188 6.79688C0.335938 6.86719 0.125 7.21875 0.125 7.57031V9.46875C0.125 9.96094 0.476562 10.3125 0.96875 10.3125H2.375V11.1562C2.375 11.6484 2.72656 12 3.21875 12H30.7812C31.2031 12 31.625 11.6484 31.625 11.1562V10.3125H33.0312C33.4531 10.3125 33.875 9.96094 33.875 9.46875V7.57031C33.875 7.21875 33.5938 6.86719 33.3125 6.79688ZM3.5 8.625L17 3.5625L30.5 8.625H3.5Z" fill="#747474"/>
</svg>

由于 SVG 文件在浏览器中存在问题,因此它会呈现为如下所示的缺失图像:

Broken SVG

我想看看是否有办法处理这个问题,以便在 SVG 损坏时我们可以显示占位符图像。我尝试了 React 的正常回退方法,但似乎没有任何效果,因为链接本身是有效的,所以那里有一些东西。关于我们可以尝试什么的任何想法?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。