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

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

ただいまの
回答率

90.48%

  • JavaScript

    20908questions

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

  • Vue.js

    1403questions

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

  • webpack

    334questions

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,656

aglkjggg

score 732

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

  • (左側)問題なく画像が表示されるコード
<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
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

<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かと思います。

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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/24 03:27 編集

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20908questions

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

  • Vue.js

    1403questions

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

  • webpack

    334questions