Question

对于某些需要在单页应用程序中显示的图像，我有SVG文件（使用Laravel和RiotJS构建）。我尝试了几种在页面上显示它的方法，但是它仅在网页上显示损坏的图像。然后，我提取SVG代码（以<svg xmlns="http://www.w3.org/2000/svg" ....开头）并将其放在数据库中并进行检索。有用。但是我认为这不是执行此类操作的最佳方法，因为我有数百个SVG，并且这种方法会很快使数据库存储过载。我尝试了以下方法，

使用img标签

<img src="path/to/mylocal/image.svg" >

使用object标签和embed标签

<object data="path/to/mylocal/image.svg" type="image/svg+xml"></object>

使用object和embed标签呈现SVG，但保留垂直滚动条。

编辑：- 请注意，我正在从数据库中获取包含的字符串，并使用JQuery这样将其显示在网页上，

在HTML中

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

在JQuery中

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

任何帮助都将受到赞赏。谢谢

Answer 1

您尝试以下代码，

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

和my.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>

它应该工作。

Answer 2

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

php artisan storage:link

如果您以前已经发布过，请尝试将任何.jpg或'.png image to your directory ( path / to / mylocal / in your example) and add the image to your page as you did with。svg`放一个。

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

如果未出现图片，请将图片放置到public目录中，然后将html中图片的路径更改为/my-image-name.jpg，这必须可行。

希望问题会解决！）

在网页上显示SVG文件

2 个答案: