vue.jsをbuildすると画像が表示されない

Question

vue.jsでbuildした成果物をサーバに展開して表示すると、画面に埋め込んだ画像が表示されません。
なお、webpack-dev-serverで表示した際には正常にされています。

実装

画像は以下に設置しています。

$ ls src/assets/images/
logo.png

画像を表示しているページは以下のような形です。

<template>
  <div>
    <img :src="logo">
  </div>
</template>

<script>
  import logo from "@/assets/images/logo.png";
  export default {
    data() {
      return {
        logo: logo
      };
    }
  }
</script>

webpack.config.jsには以下設定をしています。

const path = require('path');
module.exports = {
  ...
  resolve: {
    ...
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

現象

上記をビルドしブラウザで表示してみると、画像のパスが以下になっており、404になってしまっています。

/login/assets/no_image.a7001ee8213e668bebec5372cfd309f1.png

本来期待するパスとしては以下の形かと思われます。（実際にURLを書き換えるとブラウザで表示できます。）

/assets/no_image.a7001ee8213e668bebec5372cfd309f1.png

なんらかの設定で loginの文字が差し込まれてしまっている？んだと思われますが、ソースや設定を攫ってみても原因がわかりませんでした。
ご存知の方がいらっしゃいましたらアドバイスお願いします。

Comments

[dameo]

私自身webpackを直に使う方法は、typescoriptでクラス表記をうまく使えなかったりして、よく知りません。vue-cliの方も何となく使ってるだけなんですが、ドキュメントでは

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

となってますよ。個人的には相対パス表記(モジュールのimportと同じように解釈される)と絶対パス表記しか使ってないので、あんまり気にしたことはなかったし、ご質問のような現象で困ったこともありません。

ただ、v-bindされてるときの属性値はjavascriptの式として評価されると思うので、上記のようなルールは関係なくなる気がします。リテラルとして処理させたいときはpublicフォルダの説明にあるような``で括る必要がある気がします。リテラルとして処理させた場合のルールは、恐らく↑と同じなのではないかと思うので、そちらに合わせた記述にすれば動くのではないかと思います。

[u.shino]

このプロジェクトでは問題が発生していますが、同様の実装をしている別のプロジェクトではこの問題は発生していないため、実装には問題ないと思われます。

[dameo]

そうなんですね。では私に言えることはココまでなので、私には解決できなそうです。

[kai0310]

-- 削除 --