Vue の単一ファイルでの参照パスの方法は何ですか?-jsチュートリアル-php.cn

Vue の単一ファイルでの参照パスの方法は何ですか?

亚连

リリース： 2018-06-13 11:25:13

オリジナル

1460 人が閲覧しました

この記事では、Vue の単一ファイルでの参照パスの処理に関する関連情報を、サンプルコードを通じて詳しく紹介します。来て私と一緒に学びましょう。

はじめに

Vue の単一ファイルコンポーネントは、Vue を使用するときに非常に一般的に使用され、などの単一ファイルテンプレートにファイルパスの処理が含まれる場合があります。、スタイルでの背景の加工など。以下では、いくつかの異なるシナリオでの Vue の単一ファイルでの参照パスの方法は何ですか? の src 処理について説明し、vue+webpack を使用した開発プロセス中に静的リソース (画像処理など) を正しく参照する方法を説明します。

以下に示すように、さまざまなシナリオで画像パスを参照する例が、以下の単一ファイルコンポーネントに示されています (画像の静的リソースは src/assets/small.png に保存されます):

<template>
 <p id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片资源测试">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 };
 },
}
</script>

ログイン後にコピー

上記のコードスニペットでは 4 つのタイプが示されています。このシナリオでは、img タグを使用して、Vue 単一ファイルコンポーネント内の画像リソースを参照します。もちろん、これら 4 つの方法すべてが画像リソースを正しくロードできるわけではありません。

シナリオ 1:

テンプレート内の相対パスを使用して src 属性に直接バインドするこの場合、画像リソースを正しくロードできます。 webpack が vue 単一ファイルコンポーネントを処理するプロセスでは、vue-loader が主に *.vue ファイルの処理を担当することがわかっています。 vue-loader ドキュメントの vue-loader リソースパス処理セクションでは、vue-loader がテンプレート内のリソースパスを処理する方法について説明しています。例: 、背景: url()、@import などはモジュールの依存関係として処理されます。つまり、このような場合、vue-loader はパスのリソース参照と最終的なパスの置換を自動的に処理します。 img の処理は次のとおりです:

1	`<img src="./logo.png">`

ログイン後にコピー

は vue テンプレートコンパイラーによって次のようにコンパイルされます:

1	`createElement('img', { attrs: { src:` `require('./logo.png') }})`

ログイン後にコピー

これは、ケース 1 で画像コンテンツが正しく表示される理由も説明しています。これは、vue-loader がリソースとパスのインポートを自動的に支援するためです。交換問題。

ケース2:

テンプレートのsrc属性に相対パス文字列変数がバインドされている場合、画像が正常に表示されません。その理由は、vue-loader は変数がパス文字列であるかどうかを識別できないためであり、vue-loader が自動的にリソースを導入し、パスを置き換える問題は発生しません。この場合、コンパイルされたテンプレートは依然として相対パス文字列です。当然のことながら、対応するリソースの導入と間違ったパスがなければ、画像は正しく表示されません。

状況 3:

相対パスが正しく表示できない場合、多くの人が絶対パス変数を使用して画像をインポートしようとします。この場合、画像リソースが手動でインポートされていないため、明らかに画像を表示できません。。注: 多くの学生は、手動でリソースを導入し、絶対パス変数に従って src をバインドしようとしますが、dist/static/img/ パスの下に参照リソースが実際に存在することに気付きますが、vue-cli Webpack テンプレートには url-loader が存在します。 img形式のファイルには動作しません。ロード時にハッシュ値の処理が追加されます。この場合、絶対パス変数をバインドしても、ハッシュ値を付加した画像ファイルと正しく一致しないため、画像を正しく参照することができません。画像を手動で導入する必要があるこの場合、状況 4 のアプローチをお勧めします。

ケース 4:

テンプレートでは、src 属性が手動で導入された画像リソースに直接バインドされています。この場合、画像は正しく表示されます。このメソッドは、自動的にインポートされたパスに対応するリソースを処理するときに vue-loader によっても使用されます。

要約すると、vue 単一ファイルコンポーネントで画像を正しく表示するための鍵は次のとおりです:

画像リソースが必要であるかインポートされている場合、それは webpack の URL ローダーによって最終ディレクトリに処理されます
img src 属性を最終的な画像リソースのパスに置き換える必要があります

上記の2点は必須です。ケース 1 とケース 4 で正しく表示できるのは、どちらの場合も上記 2 つの条件が満たされているためです。ケース 1 では、vue-loader がこれを自動的に実行し、ケース 4 では手動で実行しました。

開発中に発生する可能性のある問題:

開発中に、画像リストがループでレンダリングされるシナリオに遭遇する可能性があります。上記の概要に基づいて、画像情報オブジェクトの配列を構築できます。例:

<template>
 <p id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img
 v-for="image in imgList"
 :key="image.id"
 :src="image.src"
 :alt="image.title">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
import bigImg from &#39;./assets/big.jpg&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 imgList: [
 { id: 1, title: &#39;test1&#39;, src: require(&#39;./assets/logo1.png&#39;) },
 { id: 2, title: &#39;test2&#39;, src: require(&#39;./assets/logo2.png&#39;) },
 { id: 3, title: &#39;test3&#39;, src: require(&#39;./assets/logo3.png&#39;) },
 ],
 };
 },
}
</script>