ホームページ > 記事 > ウェブフロントエンド > 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 '@/assets/logo.png'
データ内の定義: avatar: avatar
3 つを使用します:
画像を外部の静的フォルダーに配置し、それをデータ内で定義することもできます:
imgUrl : '../../static/logo.png' <img :src="imgUrl" />
以上がvue.js 画像リソースのパスが間違っている場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。