Html 在网页上显示SVG文件

我用Laravel和RiotJS构建的单页应用程序中需要显示某些图像的SVG文件。我尝试了几种在网页上显示它的方法，但它只在网页上显示一个损坏的图像。然后我提取SVG代码，从开始，您可以尝试下面的代码

<img src="myfolder/my.svg" alt="alt text" height="87px" width="100px" />

我的.svg应该是这样的

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M20,0H4V2H20V0M4,24H20V22H4V24M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M12,6.75A2.25,2.25 0 0,1 14.25,9A2.25,2.25 0 0,1 12,11.25A2.25,2.25 0 0,1 9.75,9A2.25,2.25 0 0,1 12,6.75M17,17H7V15.5C7,13.83 10.33,13 12,13C13.67,13 17,13.83 17,15.5V17Z" /></svg>

---

它应该会起作用

正如我所看到的，Sandeep Sudhakaran的回答对你没有帮助。但这个答案是正确的。 尝试检查是否使用Laravel artisan命令创建的符号链接发布了存储目录：

php artisan存储：链接

如果您以前已经发布过它，请尝试将任何.jpg或.pngimage放入示例中的目录路径/to/mylocal/，并像使用.svg`one一样将图像添加到页面中

然后加载页面并检查图像是否正确显示。如果仍然存在相同的问题，请检查图像路径，可能它不正确，如果您纠正了它，您的.svg图像也将正确显示

如果图像没有出现，请将图像放入公共目录，并在html中将图像的路径更改为/my-image-name.jpg，这必须起作用

---

希望问题能解决

你好!！能否请您展示一些代码，说明您是如何在页面上输出SVG图像的？@EvgenyVladimirovich我更新了问题Sandeep给出的解决方案对您有用吗？@EvgenyVladimirovich否。它不起作用：谢谢您的努力。png和.jpg运行良好。仅SVG图像存在以下问题：

<div id="myContainer"></div>

$('#myContainer').html(stringGetFromTheDatabase);

<img src="myfolder/my.svg" alt="alt text" height="87px" width="100px" />

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M20,0H4V2H20V0M4,24H20V22H4V24M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M12,6.75A2.25,2.25 0 0,1 14.25,9A2.25,2.25 0 0,1 12,11.25A2.25,2.25 0 0,1 9.75,9A2.25,2.25 0 0,1 12,6.75M17,17H7V15.5C7,13.83 10.33,13 12,13C13.67,13 17,13.83 17,15.5V17Z" /></svg>