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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

14653閲覧

webpack + Vue.jsで画像が表示できない

aglkjggg

総合スコア769

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2017/07/23 18:03

編集2017/07/23 18:31

###発生している問題・エラーメッセージ

  • (左側)問題なく画像が表示されるコード
<img src="../assets/logo.png">
  • (右側)画像が404になるコード
<img v-bind:src="'../assets/characters/icon/' + character.id + '.png'">

エラーコード、エラーメッセージが無く、
webpack + Vue.js を初めて10時間前後な事もあり、どのようにすれば解決するか分かりません。

試したこと

  • 画像があるはずのURLに直接アクセスする

→ 404になった

  • 問題なく画像が表示されている方のURLがどうなっているかを確認した

→ URLではなく、base64エンコードされた画像が指定されていた
(HTMLでは上記のように相対パスしているが、WEBブラウザで確認するとbase64に自動的に変換されていた)

  • my-project-name/src/assets/characters/icon/1.png にファイルが有るかどうかのチェック

→ 間違いなくある。

開発環境

  • Windows 10 64bit
  • webpack 3.3.0
  • Vue.js 2.8.2
  • 開発環境インストール方法
$ npm install -g vue-cli $ vue init webpack my-project-name $ cd my-project-name $ npm run dev
GenbuHase👍を押しています

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

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

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

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

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

guest

回答2

0

自己解決

require() すると画像の読み込みに成功しました。

html

1<img v-bind:src="require('../assets/characters/icon/' + character.id + '.png')">

また、画像のアクセス先のURLはhttp://127.0.0.1:8080/static/img/1.93f1f24.pngとなっていました。

このURLはwebpack.base.conf.jsに書かれている以下の条件から自動生成されたURLかと思います。

js

1{ 2 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 3 loader: 'url-loader', 4 options: { 5 limit: 10000, 6 name: utils.assetsPath('img/[name].[hash:7].[ext]') 7 } 8},

何故requireが必要なのかはよく分かっていませんが、自己解決とさせて頂きます。。。

投稿2017/07/23 19:49

aglkjggg

総合スコア769

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

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

0

Vue.js は触ったことが無いのですが、下記2つは別のパスを見ています。

'../assets/characters/icon/' + character.id + '.png'
my-project-name/src/assets/icon/1.png

実ファイルを基に考えたらcharacters/は不要では?
'../assets/icon/' + character.id + '.png'

それとも転記ミスでしょうか。

投稿2017/07/23 18:08

kei344

総合スコア69364

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

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

aglkjggg

2017/07/23 18:27 編集

失礼しました。 転記ミスです。 修正に加えてディレクトリやファイル構造が分かる画像を追加しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問