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中
模塊解析失敗：/home/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的內容。 這不是我想要的。

這是svg的webpack配置：

{ 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擴展名的任何文件作為靜態資源。

我將它與其他字體加載器一起用於bootstrap或其他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'}

使用該正則表達式，您可以將加載器更改為文件並將其內聯，就像您使用的那樣。