ホームページ > ウェブフロントエンド > Vue.js > vue.js 画像リソースのパスが間違っている場合の対処方法

vue.js 画像リソースのパスが間違っている場合の対処方法

藏色散人
リリース: 2023-01-13 00:45:05
オリジナル
2388 人が閲覧しました

vue.js 画像リソースのパスが間違っている場合の解決策: 1. v-bind を使用して画像の src 属性をバインドします; 2. import を使用して画像パスを導入します; 3. 画像を配置します外側の静的フォルダーを内部に配置し、データ内に imgUrl を定義します。

vue.js 画像リソースのパスが間違っている場合の対処方法

このチュートリアルの動作環境: Windows7 システム、vue2.0 バージョン、DELL G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

[関連記事の推奨事項: vue.js]

Vue.js プロジェクトで画像を参照する場合、画像パスに関して次のような状況があります。

いずれかを使用します:

データ内の画像パスを定義します:

 /*错误写法*/    imgUrl:'../assets/logo.png'
ログイン後にコピー

テンプレート内:

/*错误写法*/   <img src="{{imgUrl}}">
ログイン後にコピー

上記は間違った書き方です。 use v-bind は、画像の src 属性をバインドします。

<img :src="imgUrl">
//或者 
<img src="../assets/logo.png">
ログイン後にコピー

このメソッドは、通常の HTML 構文に従ってパスを参照し、テンプレートに配置するときに webpack によってパッケージ化できます。

使用 2:

js コードに画像パスを記述する必要がある場合、データにそれを記述すると、webpack はそれを文字列としてのみ扱い、画像アドレスを見つけることができません。 ,

間違った書き方

imgUrl:&#39;../assets/logo.png&#39;
ログイン後にコピー

現時点では、importを使って画像パスを導入できます:

<img :src="imgUrl" />
import avatar from &#39;@/assets/logo.png&#39;
ログイン後にコピー

データ内の定義: avatar: avatar

3 つを使用します:

画像を外部の静的フォルダーに配置し、それをデータ内で定義することもできます:

imgUrl : &#39;../../static/logo.png&#39;
<img :src="imgUrl" />
ログイン後にコピー

以上がvue.js 画像リソースのパスが間違っている場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート