vue-webpackパッケージ後の画像が見つかりません
1559 ワード
一、問題の説明
プロジェクトがwebpackでパッケージ化された後、dev環境で表示される画像がパッケージ化された後にファイルが見つからないという問題がよくあります.
二、異常原因
1.画像がパッケージされていない
使用するピクチャurlがダイナミックに接続されている場合、webpackがそのピクチャが参照されていることを検出していないという問題が発生する可能性があるため、パッケージ化後のピクチャは存在しないため見つからない.
2.画像パスエラー
1つのピクチャが複数回参照されると、動的にパッケージングされた前のピクチャに格納されたパスを使用すると、パッケージング時に動的に生成されたパスが直接保存され、パッケージング後の相対パスに変換されないため、ピクチャが見つかりません.
三、解決方案
require構文を使用してピクチャを導入すると、devまたはbuild環境で自動的にパス接合が行われます.
idea from github-vue-issues #202
END
プロジェクトがwebpackでパッケージ化された後、dev環境で表示される画像がパッケージ化された後にファイルが見つからないという問題がよくあります.
二、異常原因
1.画像がパッケージされていない
使用するピクチャurlがダイナミックに接続されている場合、webpackがそのピクチャが参照されていることを検出していないという問題が発生する可能性があるため、パッケージ化後のピクチャは存在しないため見つからない.
2.画像パスエラー
1つのピクチャが複数回参照されると、動的にパッケージングされた前のピクチャに格納されたパスを使用すると、パッケージング時に動的に生成されたパスが直接保存され、パッケージング後の相対パスに変換されないため、ピクチャが見つかりません.
三、解決方案
require構文を使用してピクチャを導入すると、devまたはbuild環境で自動的にパス接合が行われます.
<img :src="url" />
url () {
return require(`@/assets/${this.article.code}.jpg`)
}
idea from github-vue-issues #202
END