この記事では、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 './assets/small.png'; export default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', }; }, } </script>
上記のコード スニペットでは 4 つのタイプが示されています。このシナリオでは、img タグを使用して、Vue 単一ファイル コンポーネント内の画像リソースを参照します。もちろん、これら 4 つの方法すべてが画像リソースを正しくロードできるわけではありません。
シナリオ 1:
テンプレート内の相対パスを使用して src 属性に直接バインドする この場合、画像リソースを正しくロードできます。 webpack が vue 単一ファイル コンポーネントを処理するプロセスでは、vue-loader が主に *.vue ファイルの処理を担当することがわかっています。 vue-loader ドキュメントの vue-loader リソース パス処理セクションでは、vue-loader がテンプレート内のリソース パスを処理する方法について説明しています。例: 、背景: url()、@import などはモジュールの依存関係として処理されます。つまり、このような場合、vue-loader はパスのリソース参照と最終的なパスの置換を自動的に処理します。 img の処理は次のとおりです:
<img src="./logo.png">
は vue テンプレート コンパイラーによって次のようにコンパイルされます:
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 './assets/small.png'; import bigImg from './assets/big.jpg'; export default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', imgList: [ { id: 1, title: 'test1', src: require('./assets/logo1.png') }, { id: 2, title: 'test2', src: require('./assets/logo2.png') }, { id: 3, title: 'test3', src: require('./assets/logo3.png') }, ], }; }, } </script>
This ループでレンダリングした画像を完全に表示できます。
上記は私があなたのためにまとめたものです。
関連記事:
入力ボックスを使用して jquery でキーワードを検索する
jsとjQueryを使って指定された代入メソッドを実装する方法
以上がVue の単一ファイルでの参照パスの方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。