前提・実現したいこと
お世話になります。
Vue.jsでWEBシステム開発を行っているのですが、imgタグで画像を設定しても表示されず困っています。
表示したい画像は、ボタンを押された時に表示するモーダルウィンドウ内のwait画像です。
(モーダル用templateを用意しimportしたものをvisibleで切り替えています。)
サーバ:Windows Server2019 Standard (IIS10)
開発環境:Windows10 Visual Studio Code
該当のソースコード
<div id="waitmark"> <img src="/ajaxloading.gif" alt="loading-testA" /> </div> <div id="waitmark-b"> <img v-bind:src="require('@/assets/ajaxloading.gif')" alt="loading-testB"/> </div>
試したこと
publicとassetsの両方に画像を置いて上記を試みましたが両方上手くいきません。
(開発環境のChromeでは"loading-testA"の方は読み込めているのですが、Buildしたdist内のファイルをサーバに置くと上手くいきません)
※dist直下にajaxloading.gif、imgフォルダ内にもajaxloading.2a19817.gifという名前で画像はできておりアップしています。
【開発環境】
"loading-testA"→ <img data-v-495b3627="" src="/ajaxloading.gif" alt="loading-testA">(表示〇)
"loading-testB"→ <img data-v-495b3627="" src="img/ajaxloading.2a19817.gif" alt="loading-testB">(表示✕)
【本番サーバ】
"loading-testA"→ <img data-v-5f3bd48d="" src="/ajaxloading.gif" alt="loading-testA">(表示✕)
"loading-testB"→ <img data-v-5f3bd48d="" src="img/ajaxloading.2a19817.gif" alt="loading-testB">(表示✕)
となっていてカーソルを合わせても画像が表示されません。
他のページでは"loading-testB"と同じrequireでgif画像を指定することで「data:image/gif;base64,…」と変換されちゃんと表示されているのですが、モーダルでは何度やっても同じように変換されず表示されなかったので、publicに画像を置いて試みましたがダメでした。
なにかお心当たりのある方は、ご教示いただけませんでしょうか。
よろしくお願いします。
【追記】
ログイン→一覧画面→詳細画面→… という感じで画面遷移するのですが、
ログイン時にはどちらの場合も画像が読み込めており、一覧画面以降で読めこめなくなっているようです。
各画面でモーダルのtemplateをimportしているのが悪いのでしょうか…
あなたの回答
tips
プレビュー