Показать файл SVG на веб-странице - PullRequest
Новая
       29

Показать файл SVG на веб-странице

0 голосов
/ 04 марта 2019

У меня есть 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);

Любая помощь приветствуется.Спасибо

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Как я вижу, ответ Сандипа Судхакарана тебе не помог.Но этот ответ правильный.Попробуйте проверить, опубликовал ли вы каталог хранилища с помощью команды 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` one.

Затем загрузите страницу и проверьте, правильно ли отображается изображение.Если проблема не исчезла, проверьте путь к изображению, возможно, он не правильный, и если вы исправите его, ваше .svg изображение будет отображаться правильно.

Если изображение не появляется, введитеизображение в каталог public и измените путь к изображению в вашем html просто на /my-image-name.jpg, это должно работать.

Надеюсь, проблема будет решена!))

0 голосов
/ 04 марта 2019

Вы попробуйте следующий код, 

<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>

, это должно работать.

...