Vueページの画像が表示されない問題の解決方法

新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ画像の設定時に、パスは正しいのに画像が表示されない画像があることがわかりました。

現象：

ネットワーク ページ リソースはエラーを報告せず、ステータス コードは 200 のままです。プレビューには何も表示されません。入力後、入力したどの単語に対しても 200 が表示されることがわかりました。

解決：

webpackで静的リソースのパスを設定する

1. vue.config.jsを見つける

2. devServerのmodule.exportsにキーを追加します。

contentBase:path.join(_dirname,'src')

これは、webpack-dev-serverが現在のパスを要求されたリソースパスとして使用することを意味します。

contentBaseについて、参考記事

https://www.jb51.net/article/222324.htm

静的リソース:

方法1: パスを直接入力する

<img class="sys_logo" src="./assets/images/top-logo.png"/>

方法2: requireを使用する

'./top-logo.png' から logoUrl をインポートします。
const 画像 = {
    ロゴURL
}
デフォルトの画像をエクスポート

方法3: モジュール化

'./top-logo.png' から logoUrl をインポートします。
const 画像 = {
    ロゴURL
}
デフォルトの画像をエクスポート

使用：

js:

'./assets/images' から画像をインポートします

<img class="sys_logo" :src="Images.logoUrl" />

これで、vue ページで画像が表示されない問題の解決方法についての記事は終了です。vue ページで画像が表示されない問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。