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 データベース操作 (作成、選択、削除)

推薦する

特殊効果メッセージボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装された特殊効果メッセージ ボックスを紹介します。効果は次のとお...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...

HTML コメント HTML 内のテキストコメントをマークするための記号

HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...

Vue ドラッグ アンド ドロップのシンプルな実装

この記事では、主に次のような Vue ドラッグ アンド ドロップの簡単な実装を紹介します。レンダリン...

MySQLでよく使われる4つのストレージエンジンについて簡単に説明します。

よく使われる4つのMySQLエンジンの紹介(1):MyISAMストレージエンジン:トランザクションや...

MacにHomebrewをインストールする際の注意点

最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...

MySQLで最大接続数を達成する方法

目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

Vue で @person 関数を実装する方法

この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...

ウォーターフォールフローレイアウト(無限読み込み)を実現する js

この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに...

MySQL クラスター化インデックスのページ分割原理の分析例

この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...

入力ボックスのプレースホルダーアニメーションと入力検証を実現する純粋なCSS

さらに興味深いコンテンツについては、https://github.com/abc-club/free...

無料のパブリック STUN サーバー

無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...