Vuejs無法加載svg圖像？

在我的組件之一，我試圖加載一個SVG圖像，但vuejs/webpack失敗。Vuejs無法加載svg圖像？

這裏是我的代碼：

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

<script> 
export default {} 
</script>

和錯誤：

在./src/assets/public/images/sad.svg ERROR
模塊解析失敗： /家/ 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" },

謝謝您的幫助。

來源

2016-01-26 Cyril N.

你可以在瀏覽器中打開文件嗎？我會說這是一個Webpack問題，而不是VueJS。 – Andrius

是的，該文件可以加載。而且它也是正確的路徑，因爲錯誤消息包含文件的開頭。 –

你可以嘗試使用'svg-loader'而不是'file-loader'。 – Andrius

這一次爲我的作品：

{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'}

使用正則表達式，你可以改變可能對文件和你一樣使用它內嵌的裝載機。

來源

2016-01-26 14:36:53 TiagoLr

真棒，爲我工作。現在我必須理解爲什麼它將我的文件放在dist/dist /裏，而不是dist/... –

Vuejs無法加載svg圖像？

回答

相關問題