ホームページ > 記事 > ウェブフロントエンド > vueでローカルの静的画像を参照する方法
今回は、Vue でローカル静的画像を参照する方法を説明します。Vue でローカル静的画像を引用する際の 注意事項 について、実際のケースを見てみましょう。
ここに画像の説明を書きます 要件: コンポーネントの Index.vue はどのようにしてアセットから画像を取り出すことができますか。 1.img タグにパスを直接書き込みます:
<img src="../assets/a1.png" class="" width="100%"/>2. 配列を使用して出力を保存し、再利用します:
<el-carousel-item v-for="item in carouselData" :key="item.id"> <img :src="item.url" class="carouselImg"/> <span class="carouselSpan">{{ item.title }}</span> </el-carousel-item> data: () => ({ carouselData:[ {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1}, {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2}, {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3} ] }),効果は以下の通りです: Index.vue の完全なコードは次のとおりです:
{{ item.title }} <img src="../assets/a1.png" class="" width="100%"/> <script> import footer1 from '../components/public/footer' export default { data: () => ({ carouselData:[ {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1}, {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2}, {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3} ] }), components:{ footer1 }, } </script>
追記: Vue.js の画像参照パスを見てみましょう
Vue.js プロジェクトで画像を参照する場合、画像パスに関して次のような状況があります:1つ使用してください
データ内の画像パスを定義しますimgUrl:'../assets/logo.png'
<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src=" {{imgUrl}}">これは間違った書き方です。画像の srcs 属性をバインドするには v-bind を使用する必要があります。
:src="imgUrl">
りー
このメソッドは通常の HTML 構文に従ってパスを参照し、テンプレートに配置するときに webpack によってパッケージ化できます。2つ使用
jsコードに画像パスを記述する必要がある場合、データに記述する場合imgUrl:'../assets/logo.png'
<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="../assets/logo.png">。 データで定義します
avatar: avatar
シナリオ 3
画像を外部の静的フォルダーに配置し、データ内で定義することもできます::src="avatar" /> import avatar from '@/assets/logo.png'上記は、Vue.js で画像パスを参照する方法です。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
プロジェクトをパッケージ化した後に Vue が更新されて 404 が表示されるときに 404 に対処する方法
Vue が xe-utils 関数ライブラリを使用する手順の詳細な説明
以上がvueでローカルの静的画像を参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。