画像を含む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/***/ }),
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。