英文:
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('img');
image.addEventListener('load', () => 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: 'image/svg+xml'});
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const image = new Image();
image.src = reader.result;
childComponent.propName = reader.result;
}
If you still facing issue let me know, i will help you ...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论