vue が画像が見つからないというエラーを報告した場合はどうすればよいですか?

画像が見つからないという Vue エラーの解決策: 1. 構成ファイルを変更し、絶対パスを相対パスに変更します; 2. 画像をモジュールとしてロードし、画像を静的ファイルに置きますディレクトリ; 3. imageUrls を対応する vue ファイルに導入し、参照を解析します。

このチュートリアルの動作環境: Windows7 システム、vue3、Dell G3 コンピューター。

vue が画像が見つからないというエラーを報告した場合はどうすればよいですか?

vue で画像が読み込まれない問題と解決策

vue を使ってプロジェクトを開発していると、よく遭遇する問題が「画像が読み込まれない」という問題です。以下に、画像が読み込めないいくつかの状況とその解決策をまとめました。

1. プロジェクトのパッケージ化が完了したら、全体的に空白の

1. パスの問題

原因

vue webpack プロジェクトで、プロジェクトがパッケージ化されている css、jsの参照パスが絶対パスになっているため、プロジェクトをデプロイするとstaticがルートディレクトリとみなされ、ファイルの参照パスがエラーになります。

解決策

構成ファイルを変更して、絶対パスを相対パスに変更します。

具体的な操作は次のとおりです。

バージョン 3.0 より前の 1.vue-cli

インデックスに bulid モジュールによってエクスポートされたパスを構成します。 jsは設定の下にあります。 Index.html のコンテンツは script タグを通じて導入されており、パスが間違っているため、開いたときに必ず空白になります。まずデフォルトのパスを見てみましょう。

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

デフォルトのassetsPublicPathはルートディレクトリである「/」です。 Index.html と static は同じディレクトリにあります。したがって、これを './ '

2.vue-cli に変更します。バージョン 3.0 以降では、

vue.config.js ファイルを設定します

module.exports = {
  // baseUrl:'./', // vue-cli3.3以下版本使用
  publicPath:'./' // vue-cli3.3+新版本使用

2. vue-router のヒストリー モードには、パッケージ化後に空のインターフェイスが表示されます。

src の router/index.js ルーティング設定のデフォルト モードはハッシュです。ヒストリー モードに変更すると、 、それも開かれます。空白。したがって、ハッシュに変更するか、モード設定を直接削除して、それをデフォルトにします。

履歴モードを使用する必要がある場合は、すべての状況をカバーする候補リソースをサーバーに追加する必要があります。URL が静的リソースと一致しない場合は、index.html を返す必要があります。このページは次のようになります。あなたのアプリはページに依存します。

#

// mode: 'history' 
// 默认hash

2. アセットディレクトリの画像が読み込めない

#vue-cli のアセットと静的ファイルの違い

assets
• : プロジェクトのコンパイル プロセス中に、プロジェクトは webpack によって処理され、モジュールの依存関係に解析されます。a6f88eaad3fd08d2d0724bf21b45e7c8 などの相対パス形式のみがサポートされています。そして、background:url( ./logo.png)、「./logo.png」は相対リソース パスであり、モジュールの依存関係として webpack によって解析されます。
static
• : このディレクトリ内のファイルは webpack では処理されません。簡単に言うと、サードパーティのファイルが保存されている場所は webpack によって解析されません。これは、最終的なパッケージング ディレクトリ (デフォルトは dist/static) に直接コピーされます。これらのファイルは、絶対パスを使用して参照する必要があります。絶対パスは、config.js ファイル内の build.assetsPublic および build.assertsSubDirectory リンクによって決定されます。 static/ に配置されたファイルは、絶対パス /static[ファイル名] として参照する必要があります。
webpack の特性によると、一般に静的ファイルは変更されませんが、第 3 レベルのファイルは変更される可能性のあるファイルをアサートします

Reason

Webpack では, 画像はモジュールとして使用されます。それらは動的にロードされるため、url-loader は画像アドレスを解析できません。その後、npm run dev または npm run build の後、パスは処理されません [webpack によって解析されます]パスは /static/img/[ファイル名].png として解析され、完全なアドレスは localhost:8080/static/img/[ファイル名].png]

#解決策

# #1. 画像をモジュールとしてロードする

たとえば、images:[{src:require('./1.png')},{src:require('./2.png') }] これにより、webpack が解析できるようになります。

2. 画像を静的ディレクトリに配置します

ただし、images:[{src:”/static/1 などの絶対パスとして記述する必要があります) .png”},{ src:”/static/2.png”}] と記述すると画像が表示されます。 もちろん、webpack.base.config.js で定義することでパスの記述長を短くすることもできます。 ローカル画像の読み込みを簡素化する方法

1. 静的ファイルに新しい imageUrls フォルダーを作成します

2. imageUrls ファイルに入力します

{
  'imageUrls': [
    {
      'image1': '/static/image/image1.png'
    },
    {
      'image2': '/static/image/image2.png'
    }
  ]
}

3. imageUrls を対応する vue ファイルに導入し、参照を解析するだけです

import img from '../../../static/imageUrls/imageUrls.json'
export default {
  data() {
    return {
      imageGroups: img.imageUrls
    }
  }
}

推奨学習: 「

vue.js ビデオ チュートリアル

」

以上がvue が画像が見つからないというエラーを報告した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。