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

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' から画像をインポートします
html:
<img class="sys_logo" :src="Images.logoUrl" />

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

以下もご興味があるかもしれません:
  • クロスドメイン時にVueが動的に画像をロードして表示されない問題と解決策
  • Vueがローカル画像を動的に読み込む問題を解決する
  • Vue に基づいて画像 src を動的に読み込むソリューション
  • Vue で画像読み込みに失敗する問題と解決方法

<<:  nginx設定ファイルの解釈の詳細な説明

>>:  MySQL データベース操作 (作成、選択、削除)

推薦する

Zabbix で複数の JVM プロセスを監視する方法

1. シナリオの説明:私たちの環境ではマイクロサービスを使用しています。各プログラムには個別のプロセ...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

RHEL8 /CentOS8 でマルチノード Elastic Stack クラスターを構築する方法

一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...

Nginx コンパイル済み nginx - 新しいモジュールを追加

1. 既存のモジュールを表示する nginx の sbin ディレクトリに nginx の sbin...

MySQL ファントムリードとその排除方法の詳細な説明

目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...

MySQLサーバーが消えたエラーの解決策

PHP で MySQL サーバーが消えた問題1. 背景以前、Codeigniter でコンソール コ...

Nginx/Httpd リバース プロキシ Tomcat 設定チュートリアル

以前のブログでは、Tomcatのサーバーの各コンポーネントの使用について学びました。 Tomcatは...

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...

Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...

Vueのフィルターとディレクティブの詳細な説明

目次vueカスタムディレクティブグローバル指令ローカル指示使用フック関数(両方ともオプション)使用方...

間違った MySQL コマンドをキャンセルしたい場合はどうすればいいですか?

間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

CSS 属性セレクタを使用して HTML DNA を接合する方法

CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...

Docker Compose マルチコンテナデプロイメントの実装

目次1. WordPressの導入1. 環境を整える(II) イメージを実行するDocker の作成...

Web デザインにおける HTML フォーマットと長いファイルに関するヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...