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

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

このチュートリアルの動作環境: 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:'../assets/logo.png'

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

<img :src="imgUrl" />
import avatar from &#39;@/assets/logo.png&#39;

データ内の定義: avatar: avatar

3 つを使用します:

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

imgUrl ： '../../static/logo.png'
<img :src="imgUrl" />

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