将<svg>打印在<img>内部
将<svg>打印在<img>内部
提问于 2022-05-15 12:43:43
你好，我试着用svgs做一个小应用。我有一个返回svg和其他信息的请求。
[
{
"svg": "<svg \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-6 w-6\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n>\n <path \n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M11 19l-7-7 7-7m8 14l-7-7 7-7\"\n />\n</svg>",
}
]求svg值
useEffect(() => {
getSummaryWarnings().then((res) => {
setData(res.data);
});
}, []);打印img
{data.map((item) => (
<img
tabIndex={0}
key={item._id}
className="warning-sign"
alt={item.title}
src={item.svg}
onClick={() => tooglePopup(item)}
/>
))}但我看不到我的svg。任何帮助。
回答 1
Stack Overflow用户
发布于 2022-05-15 13:08:31
我找到了另一种解决方案：
我们可以用这个打印svg
<div
tabIndex={0}
key={item._id}
className="warning-sign"
alt={item.title}
onClick={() => tooglePopup(item)}
dangerouslySetInnerHTML={{ __html: item.svg }}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72248372
复制相关文章
相似问题
腾讯云开发者
