Vuejs не загружает изображение svg?

Question

В одном из моих компонентов я пытаюсь загрузить изображение svg, но vuejs/webpack терпит неудачу.

Вот мой код:

<template> 
    <img src="../../assets/public/images/sad.svg" /> 
</template> 

<script> 
export default {} 
</script> 

И ошибка:

ОШИБКА в ./src/assets/public/images/sad.svg
модуль синтаксического анализа не удалось: /дома/cabox/workspace/src/assets/public/images/sad.svg Строка 1: Неожиданный токен < Для обработки этого типа файла вам может понадобиться соответствующий загрузчик .
|
|
| @ ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template & index = 0! ./ src/components/tooltip.vue 1: 205-258 1: 592-645

Из того, что я понимаю, Vuejs (или Webpack) пытается интерпретировать содержимое .svg. И это не то, что я хочу.

Вот мой WebPack конфигурации для SVG:

{ test: "\.svg", loader: "file-loader?mimetype=image/svg+xml" }, 

Спасибо за вашу помощь.

Answer 1

Это один работает для меня:

{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'} 

Его регулярное выражение для обработки любого файла с расширением SVG как статический ресурс так, как вы ищете.

Я использую его с другими шрифтами погрузчиками для начальной загрузки или других glyphfonts:

{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'} 

Используя это регулярное выражение, вероятно, можно изменить загрузчик в файл и INLINE его, как вы использовали.