将SVG字符串转换为图像源

huangapple go评论64阅读模式
英文:

Conver svg string to img source

问题

我需要将传入的字符串'<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.435 19.0204L18.065 14.7368C17.8678 14.5435 17.6004 14.4361 17.3199 14.4361H16.6054C17.8152 12.9194 18.534 11.0118 18.534 8.93663C18.534 4 14.4533 0 9.41709 0C4.38087 0 0.300171 4 0.300171 8.93663C0.300171 13.8733 4.38087 17.8733 9.41709 17.8733C11.5341 17.8733 13.4803 17.1686 15.0275 15.9828V16.6831C15.0275 16.9581 15.1371 17.2202 15.3343 17.4135L19.7043 21.6971C20.1163 22.101 20.7825 22.101 21.1902 21.6971L22.4306 20.4812C22.8426 20.0773 22.8426 19.4243 22.435 19.0204ZM9.41709 14.4361C6.31821 14.4361 3.80668 11.9785 3.80668 8.93663C3.80668 5.89903 6.31383 3.43716 9.41709 3.43716C12.516 3.43716 15.0275 5.89474 15.0275 8.93663C15.0275 11.9742 12.5203 14.4361 9.41709 14.4361Z" fill="#B0B0B0"/></svg>' 转换成img标签的src属性,并将其作为属性传递给子组件。我该如何做?

我尝试了以下方法,但没有成功:

let blob = new Blob([data.payload], {type: 'image/svg+xml'});
let url = URL.createObjectURL(blob);
const image = document.createElement('img');
image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});
image.src = url;
英文:

I need to conver incoming string '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.435 19.0204L18.065 14.7368C17.8678 14.5435 17.6004 14.4361 17.3199 14.4361H16.6054C17.8152 12.9194 18.534 11.0118 18.534 8.93663C18.534 4 14.4533 0 9.41709 0C4.38087 0 0.300171 4 0.300171 8.93663C0.300171 13.8733 4.38087 17.8733 9.41709 17.8733C11.5341 17.8733 13.4803 17.1686 15.0275 15.9828V16.6831C15.0275 16.9581 15.1371 17.2202 15.3343 17.4135L19.7043 21.6971C20.1163 22.101 20.7825 22.101 21.1902 21.6971L22.4306 20.4812C22.8426 20.0773 22.8426 19.4243 22.435 19.0204ZM9.41709 14.4361C6.31821 14.4361 3.80668 11.9785 3.80668 8.93663C3.80668 5.89903 6.31383 3.43716 9.41709 3.43716C12.516 3.43716 15.0275 5.89474 15.0275 8.93663C15.0275 11.9742 12.5203 14.4361 9.41709 14.4361Z" fill="#B0B0B0"/>
</svg>' to img src attribute and pass it as prop to child component. How can I do that?

I tried this, but its not working.

`let blob = new Blob([data.payload], {type: 'image/svg+xml'});

      let url = URL.createObjectURL(blob);
      const image = document.createElement(&#39;img&#39;);
      image.addEventListener(&#39;load&#39;, () =&gt; URL.revokeObjectURL(url), {once: true});
      image.src = url;`

答案1

得分: 0

你能否尝试运行此代码并告诉我是否有效?

    let blob = new Blob([data.payload], {type: 'image/svg+xml'});
    
    let reader = new FileReader();
    reader.readAsDataURL(blob);
    
    reader.onloadend = () => {
      const image = new Image();
      image.src = reader.result;
    
      childComponent.propName = reader.result;
    }

如果仍然存在问题,请告诉我,我会帮助你。

英文:

can you please try this code and lemme know if this works or not..

let blob = new Blob([data.payload], {type: &#39;image/svg+xml&#39;});

let reader = new FileReader();
reader.readAsDataURL(blob);

reader.onloadend = () =&gt; {
  const image = new Image();
  image.src = reader.result;

  childComponent.propName = reader.result;
}

If you still facing issue let me know, i will help you ...

huangapple
  • 本文由 发表于 2023年5月14日 16:30:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76246547.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定