質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Q&A

解決済

1回答

732閲覧

vueコンポーネントをnpmに公開すると画像が表示されなくなる

Fushihara

総合スコア52

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

0グッド

0クリップ

投稿2019/05/31 14:38

編集2019/05/31 14:40

画像を含むvueコンポーネントを作成しnpm publishしたのですが、そのコンポーネントをnpm installすると画像が表示されませんでした。
vue-cli-service serveで表示されず、vue-cli-service buildでも画像ファイルがコピーされませんでした。
どのようにすれば、画像が使えるのでしょうか?

他のコンポーネントはどうなってるのか確認しようと、既存のvueコンポーネントを色々確認したのですが画像ファイルを含むvueコンポーネントという物が見つかりませんでした。

(vueコンポーネントで図形を表示する時は、カスタムフォントを使うかインラインsvgを使うのが当たり前らしく、vueコンポーネントの中に画像ファイルを設置しているようなコンポーネントは一つも見つかりませんでした。)

詳細

こちらの vueコンポーネントを作成しました。
https://www.npmjs.com/package/@fushihara/vuejs-google-doc-list-test-83k7ynyt

このvueコンポーネントの中にはいくつかのsvg画像ファイルが存在し、npmjsサーバにアップロードされている事と、開発環境では画像が表示されている事を確認しています。

新しいvueプロジェクトを作成し、上記の作成したvueコンポーネントをnpm installします。
vueファイルの中身は以下の通りです。

vue

1// src/HelloWorld.svg 2<template> 3 <div style="border:solid 1px black;background:#EEE;padding:10px;"> 4 <Gdl></Gdl> 5 </div> 6</template> 7 8<script lang="ts"> 9import Vue from "vue"; 10import Gdl from '@fushihara/vuejs-google-doc-list-test-83k7ynyt'; 11 12export default Vue.extend({ 13 mounted: function () { }, 14 components: { 15 Gdl 16 }, 17}); 18</script>

npm installしたプロジェクトのnode_modulesの中の該当プロジェクトにsvgの画像ファイルは確かに存在します。
イメージ説明

vue-cli-service serveで表示されない

vueファイルをvue-cli-service serveで表示した時のdevtoolの中身です。上の赤い四角の中に、本来はsvgの画像が表示されます。
下の赤い四角の部分がリクエストで失敗している部分です。200レスポンスが返ってきていますが、中身はsvgの画像ではなく、localhostのhtmlが返ってきています。
vue-cli-service serveを実行した時に表示されるURLはhttp://localhost:8080/なのですが、http://localhost:8080/hogehoge の様に存在しないURLを指定してもhttp://localhost:8080/と同じ内容が返ってきます。画像ファイルへのリクエストで200レスポンスでhttp://localhost:8080/が返ってくるのはこれが原因かと思います)

イメージ説明

vue-cli-service buildでファイルがコピーされない

vue-cli-service build --target lib --name HelloWorld --filename hello-world "./src/HelloWorld.vue"でvueファイルをコンパイルしたのですが、作成されたディレクトリの中に画像ファイルがありませんでした。

イメージ説明

この中のumd.jsファイルの該当部分を見ると、ファイルを読み込むようになっています。

js

1/***/ "./src/images/loading.svg": 2/*!********************************!*\ 3 !*** ./src/images/loading.svg ***! 4 ********************************/ 5/*! no static exports found */ 6/***/ (function(module, exports, __webpack_require__) { 7 8module.exports = __webpack_require__.p + "img/loading.efed2e40.svg"; 9 10/***/ }),

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

file-loaderではなくurl-loaderを使う事にしました

投稿2019/06/03 12:42

Fushihara

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問