Как загрузить SVG с сервера и вставить их в строку
В настоящее время я использую плагин svg-inline-loader Webpack, например решение, и он хорошо работает со статическими значками.
Но теперь мне нужно загрузить значки с HTTP-сервера. И когда я пытаюсь записать URL-адрес значка в src вектора, это не работает. Я мог бы просто использовать тег <img>, но мне нужно изменить цвет заливки.
Как загрузить значки с сервера и вставить их как встроенный SVG?
@StephenThomas, вы ссылаетесь на то, что говорит OP, не работает.
@EmileBergeron благодарит за редактирование. Вы знаете что-нибудь, что могло бы мне помочь?
@EmileBergeron Они совсем не такие. OP отмечает, что загрузчик веб-пакетов не будет работать через http. Это абсолютно верно, поскольку webpack происходит на этапе сборки и не включает сеть. Сообщение codepin показывает, как загружать ресурсы SVG через AJAX и внедрять их в DOM. Это именно то, как добиться того, о чем просит ОП.
@StephenThomas, ты прав, моя плохая. Я только что увидел запасную часть <img src = "..."> и подумал, что это не сработает;)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Стивен Томас поделился верным решением со своим ссылка на загрузку встроенного SVG.
Что в Vue.
Скажем, бэкэнд возвращает следующий SVG (обратите внимание на fill = "currentColor"):
<svg aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 384 512">
<path fill = "currentColor"
d = "M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"></path>
</svg>
Вы можете создать очень простой компонент изображения SVG:
<template>
<span v-html = "content" />
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
}
},
data() {
return {content: ''};
},
watch: {
src: {
immediate: true,
handler(src) {
axios(src).then((response) => this.content = response.data);
}
}
},
}
</script>
Затем используйте его, когда вам это нужно:
<template>
<svg-img :src = "svgSrc" />
</template>
<script>
import SvgImg from './components/SvgImg.vue';
export default {
components: {
SvgImg
},
data: {
svgSrc: 'url/to/backend/times.svg',
},
}
</script>