为什么我的图像没有使用此数据 URL 呈现? [英] Why is my image not rendering with this data 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%20110.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'%2023%C%F%C%E%C%3F%C%E%30%C%F%C%3Dalt="icon">

解决方案

看起来像是编码问题，检查这个.我使用

Can anybody help me to understand why is this icon not rendering? I have tried extracting the svg out of the data url and decoded it to find it working fine. Why is it not rendering with the data url? Thanks

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

解决方案

Looks like an encoding issue, check this. I used this url to encode the 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>

See the diff between working and non-working version. Looks like you encode the spaces also.

这篇关于为什么我的图像没有使用此数据 URL 呈现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！