为什么我的图像无法使用此数据URL渲染？

如何解决为什么我的图像无法使用此数据URL渲染？

有人可以帮助我了解为什么该图标未呈现吗？我尝试从数据网址中提取svg并对其进行解码，以使其正常工作。为什么不使用数据URL呈现？谢谢

<img src="data:image/svg+xml,%3Csvg%20width%3D'26'%20height%3D'26'%20fill%3D'none'%3E%3Cpath%20d%3D'M15.9586%200.55555C18.7362%200.55555%2020.0818%200.815388%2021.4801%201.56324C22.7512%202.24301%2023.757%203.2488%2024.4367%204.51985C25.1846%205.91821%2025.4444%207.26377%2025.4444%2010.0414V15.9586C25.4444%2018.7362%2025.1846%2020.0818%2024.4367%2021.4801C23.757%2022.7512%2022.7512%2023.757%2021.4801%2024.4367C20.0818%2025.1846%2018.7362%2025.4444%2015.9586%2025.4444H10.0414C7.26376%2025.4444%205.9182%2025.1846%204.51984%2024.4367C3.24879%2023.757%202.243%2022.7512%201.56323%2021.4801C0.815381%2020.0818%200.555542%2018.7362%200.555542%2015.9586V10.0414C0.555542%207.26377%200.815381%205.91821%201.56323%204.51985C2.243%203.2488%203.24879%202.24301%204.51984%201.56324C5.9182%200.815388%207.26376%200.55555%2010.0414%200.55555H15.9586ZM18.5947%207.84114L10.7876%2015.8922L7.40523%2012.4041C6.84704%2011.8285%205.92789%2011.8143%205.35225%2012.3725C4.77661%2012.9307%204.76247%2013.8499%205.32067%2014.4255L9.74536%2018.9885C10.3157%2019.5767%2011.2595%2019.5767%2011.8299%2018.9885L20.6793%209.86255C21.2375%209.28691%2021.2234%208.36775%2020.6477%207.80956C20.0721%207.25137%2019.1529%207.26551%2018.5947%207.84114Z'%20fill%3D'%231B60D8'%3E%3C%2Fpath%3E%3C%2Fsvg%3E"
  alt="icon">

解决方法

看起来像是编码问题，请检查一下。我使用this网址对svg进行编码

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cpath d='M15.9586 0.55555C18.7362 0.55555 20.0818 0.815388 21.4801 1.56324C22.7512 2.24301 23.757 3.2488 24.4367 4.51985C25.1846 5.91821 25.4444 7.26377 25.4444 10.0414V15.9586C25.4444 18.7362 25.1846 20.0818 24.4367 21.4801C23.757 22.7512 22.7512 23.757 21.4801 24.4367C20.0818 25.1846 18.7362 25.4444 15.9586 25.4444H10.0414C7.26376 25.4444 5.9182 25.1846 4.51984 24.4367C3.24879 23.757 2.243 22.7512 1.56323 21.4801C0.815381 20.0818 0.555542 18.7362 0.555542 15.9586V10.0414C0.555542 7.26377 0.815381 5.91821 1.56323 4.51985C2.243 3.2488 3.24879 2.24301 4.51984 1.56324C5.9182 0.815388 7.26376 0.55555 10.0414 0.55555H15.9586ZM18.5947 7.84114L10.7876 15.8922L7.40523 12.4041C6.84704 11.8285 5.92789 11.8143 5.35225 12.3725C4.77661 12.9307 4.76247 13.8499 5.32067 14.4255L9.74536 18.9885C10.3157 19.5767 11.2595 19.5767 11.8299 18.9885L20.6793 9.86255C21.2375 9.28691 21.2234 8.36775 20.6477 7.80956C20.0721 7.25137 19.1529 7.26551 18.5947 7.84114Z' fill='%231B60D8'%3E%3C/path%3E%3C/svg%3E" alt="icon">

<br />
Actual svg
  
  <svg width='26' height='26' fill='none'><path d='M15.9586 0.55555C18.7362 0.55555 20.0818 0.815388 21.4801 1.56324C22.7512 2.24301 23.757 3.2488 24.4367 4.51985C25.1846 5.91821 25.4444 7.26377 25.4444 10.0414V15.9586C25.4444 18.7362 25.1846 20.0818 24.4367 21.4801C23.757 22.7512 22.7512 23.757 21.4801 24.4367C20.0818 25.1846 18.7362 25.4444 15.9586 25.4444H10.0414C7.26376 25.4444 5.9182 25.1846 4.51984 24.4367C3.24879 23.757 2.243 22.7512 1.56323 21.4801C0.815381 20.0818 0.555542 18.7362 0.555542 15.9586V10.0414C0.555542 7.26377 0.815381 5.91821 1.56323 4.51985C2.243 3.2488 3.24879 2.24301 4.51984 1.56324C5.9182 0.815388 7.26376 0.55555 10.0414 0.55555H15.9586ZM18.5947 7.84114L10.7876 15.8922L7.40523 12.4041C6.84704 11.8285 5.92789 11.8143 5.35225 12.3725C4.77661 12.9307 4.76247 13.8499 5.32067 14.4255L9.74536 18.9885C10.3157 19.5767 11.2595 19.5767 11.8299 18.9885L20.6793 9.86255C21.2375 9.28691 21.2234 8.36775 20.6477 7.80956C20.0721 7.25137 19.1529 7.26551 18.5947 7.84114Z' fill='#1B60D8'></path></svg>

查看有效版本和无效版本之间的区别。看起来您也对空格进行了编码。

,

在现代浏览器中，唯一可以转义的字符是带有%23的＃

但是您必须设置xmlns名称空间

您还应该通过SVGO运行SVG：https://jakearchibald.github.io/svgomg/
以0.nnnnnn精度，您将1.000.000'pixel-precision'填充为1像素。

<img src="data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' fill='none'>
<path d='M15.9586 0.55555C18.7362 0.55555 20.0818 0.815388 21.4801 1.56324C22.7512 2.24301 23.757 3.2488 24.4367 4.51985C25.1846 5.91821 25.4444 7.26377 25.4444 10.0414V15.9586C25.4444 18.7362 25.1846 20.0818 24.4367 21.4801C23.757 22.7512 22.7512 23.757 21.4801 24.4367C20.0818 25.1846 18.7362 25.4444 15.9586 25.4444H10.0414C7.26376 25.4444 5.9182 25.1846 4.51984 24.4367C3.24879 23.757 2.243 22.7512 1.56323 21.4801C0.815381 20.0818 0.555542 18.7362 0.555542 15.9586V10.0414C0.555542 7.26377 0.815381 5.91821 1.56323 4.51985C2.243 3.2488 3.24879 2.24301 4.51984 1.56324C5.9182 0.815388 7.26376 0.55555 10.0414 0.55555H15.9586ZM18.5947 7.84114L10.7876 15.8922L7.40523 12.4041C6.84704 11.8285 5.92789 11.8143 5.35225 12.3725C4.77661 12.9307 4.76247 13.8499 5.32067 14.4255L9.74536 18.9885C10.3157 19.5767 11.2595 19.5767 11.8299 18.9885L20.6793 9.86255C21.2375 9.28691 21.2234 8.36775 20.6477 7.80956C20.0721 7.25137 19.1529 7.26551 18.5947 7.84114Z' fill='%231B60D8'></path></svg>"
  alt="icon">