Загрузка svg в веб-пак с svg-url-loader
У меня много проблем с работой с SVG в моем рабочем процессе webpack. Я пытаюсь отобразить его с помощью свойства background: url(sample.svg) в CSS. Использование только этого не сработало, поэтому я решил, что использовал загрузчик. Вот шаги, которые я использовал.
Я использовал svg-url-loader для загрузки SVG.
1.
Я установил svg-url-loader через npm и добавил это в свой module.exports:
{
test: /\.svg/,
use: {
loader: 'svg-url-loader'
}
},
2. Я добавил это в начало своего файла index.js:
require('svg-url-loader!./images/topography.svg');
3.
Я добавил background-image с SVG-путем в свой CSS:
body {
background-image: url("../images/topography.svg");
background-size: 340px, auto;
min-height: calc(100vh - 100px);
margin: 50px;
background-attachment: fixed;
letter-spacing: -1px;
}
4. SVG не отображается на странице. Когда я просматриваю тело в браузере, я обнаруживаю следующее:
background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);
Я не слишком много знаю о data-uri, поэтому, возможно, я столкнулся с проблемой там.
Кроме того, я пробовал использовать разные файлы SVG, и ни один из них не работал.
Думаю, надо реализовать этот github.com/webpack-contrib/extract-text-webpack-plugin
Ответы 3
Я встретил ту же самую ошибку. После некоторого расследования я обнаружил, что добавил еще один загрузчик svg, который вызвал эту проблему, поэтому я исправил его, удалив другой загрузчик svg:
{
test: /\.svg/,
use: {
loader: 'svg-url-loader'
}
},
{
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [{ removeTitle: false }],
floatPrecision: 2
},
jsx: true
}
}
]
}
Возможно, вы также добавили несколько дополнительных загрузчиков для одновременной обработки файлов svg, пожалуйста, проверьте.
Ты можешь:
а) настроить загрузчики в webpack.config.js:
example.js:
import ExampleIcon from 'assets/icons/example-icon.svg';
...
<ExampleIcon className = {styles.exampleIcon} />
webpack.config.js:
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'react-svg-loader',
options: {
svgo: {
plugins: [{ removeTitle: false }],
floatPrecision: 2
},
jsx: true
}
}
]
},
б) или настроить загрузчики в строке импорта:
import ExampleIcon from '!babel-loader!react-svg-loader!assets/icons/example-icon.svg';
...
<ExampleIcon className = {styles.exampleIcon} />
Я тоже столкнулся с той же проблемой. У нас есть собственный загрузчик URL, который основан на загрузчике URL и загрузчике файлов. Когда размер svg ограничен 10 КБ, он вызывает url-loader для обработки svg ， в противном случае он вызывает файл-загрузчик для обработки. Вроде нормально ， но в связанном файле видно, что он дважды обрабатывался разными загрузчиками. Строка в кодировке base64 была экспортирована через module.exports, но на странице путь не был заменен. Это потому, что я использовал vue-cli для создания проекта, а svg был обработан файловым загрузчиком. Когда я удалил конфигурацию загрузчика файлов по умолчанию, все заработало, как ожидалось.
Кроме того, я не получаю сообщений об ошибках в терминале, веб-пакет успешно компилируется.