vue cliは絶対パスを使って画像問題の解決を引用します。


前言
Vueは何ですか?ユーザーインターフェースを構築する漸進的な枠組み(公式サイトの解釈)で、漸進的な枠組みとは何ですか?簡単な答えは主張が一番少ないです。これらの概念は自分で見て、自分で理解します。千人の読者は千人のハムレットですが、多くの説明があります。公式文書は全面的です。
Vueはここ二年間で火を比較する先端フレームです。Vue cliは絶対パスを使って画像問題を引用する内容を詳しく紹介します。
本文:
ページで絶対パスを使用すると、jsでrequire()を使用して導入することができます。

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}

<img :src="src">
スタイルの中では絶対パスが使えないようです。画像のリソースをstaticに入れない限り、そのまま引用できます。

background: url("/static/images/banner.jpg") no-repeat;
しかし、staticの中に置いてwebpackを包装して、資源を発表目録にコピーするだけで、小さいピクチャーをbase 64に最適化することはできません。
写真の資源を最適化することができることを兼ね備えるため、やはりStticに画像の資源を置くことに適しません。しかし、vueページstyleラベルの中でスタイルを書いて、カタログの深さに従ってパスを引用する可能性があります。

background: url("../../../images/banner.jpg") no-repeat;
いくつかのトラブルを省く方法があるようです。
スタイルファイルをstyleフォルダに統一して、スタイル写真のリソースを相対パスにして、スタイルラベルにsrc属性でスタイルを導入すると、多すぎて戻るのを避けることができます。

── src
 ── images
  ── banner.jpg
 ── style
  ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

<style src="STYLE/index" lang="scss"></style>
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。