vue で絶対パス参照を使用する cli に関連する問題

この記事では主に、vue cli で画像を参照するための絶対パスを使用する問題の解決策をサンプル コードを通じて詳しく紹介します。これは、学習や仕事に必要な学習に役立ちます。以下でそれを見てみましょう。

はじめに

Vue とは何ですか? ユーザー インターフェイスを構築するための進歩的なフレームワークです (公式 Web サイトでの説明) 簡単な答えは、これらの概念が最も提唱されていないということです。千人の読者、千人のハムレットを理解するには、あまり説明する必要はありません。 Vue の公式ドキュメントは非常に包括的です。

Vue は過去 2 年間で人気のあるフロントエンド フレームワーク (プログレッシブ フレームワーク) です。この記事では、vue cli で画像を参照するために絶対パスを使用する問題について詳しく説明し、参考と学習のために共有します。 . さて、以下では多くは言いません。一緒に見てみましょう。

テキスト:

ページ内での絶対パスの使用は、jsのrequire()を使用することで導入できます

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

<img :src="src">

画像リソースが静的に配置されていない限り、スタイルで絶対パスを使用できないようですが、そして、このように引用できます

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

ただし、静的に配置した後、webpack はリソースをリリース ディレクトリにコピーするだけで、小さなイメージを Base64 に最適化することはありません。

画像リソースはバランスを考慮して最適化できるため、画像リソースを静的に置くことはまだ適していませんが、vueページのstyleタグにスタイルを記述する場合、ディレクトリが深くなるにつれて、参照パスは次のようになります。

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

うまくいきそうな方法があります 手間を省きます:

スタイル ファイルをスタイル フォルダーに置き、スタイル画像リソースの相対パスを使用し、src 属性を使用してスタイル タグにスタイルを導入します。あまりにも多くの返品を避けることができます~~~

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

rreerree

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

jsのオブジェクトに配列を追加する方法

gulpを使用して完全なプロジェクトプロセスを作成する方法

vueでaxiosを使用してJavaScriptでファイルアップロードを実装する

方法写真を大きくするには

vueでスタイルを切り替える方法

以上がvue で絶対パス参照を使用する cli に関連する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。