ホームページ > 記事 > ウェブフロントエンド > CSS 参照画像をパッケージ化した後にリソース ファイルが見つからない場合があります。
CSS 参照画像をパッケージ化した後にリソース ファイルが見つからない場合があります。
- php中世界最好的语言オリジナル
- 2018-03-28 09:45:552465ブラウズ
今回は、CSS参照画像をパッケージ化した後にリソースファイルが見つからない原因を紹介します。 vue を使用して、CSS を通じて画像リソースをパッケージ化し、参照します。
.img {
height: 500px;
width: 100%;
background: url("./assets/img/1.jpg") no-repeat;
background-size: 100%;
}
開発環境のホットアップデートの効果はこんな感じ
しかし、パッケージ化後のページではリソースが見つからないというエラーが報告されました。
CSSが画像をインポートしてパッケージ化した後、スタイルローダーが独自のpublicPathを設定できなかったので、
TextPluginのCSSパスpublicPathを変更しました。 if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
// css 引用图片打包问题
publicPath: '../../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
} 一度ビルドしたらエラーも出ず正常に表示されました！
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vueパッケージ化後のフォントと画像リソースの失敗に対処する方法webpackフォントアイコンが表示できない問題を解決する方法以上がCSS 参照画像をパッケージ化した後にリソース ファイルが見つからない場合があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。