使用vue?v-for循環(huán)圖片路徑方式
更新時間:2022年04月08日 11:43:23 作者:抑制、
這篇文章主要介紹了使用vue?v-for循環(huán)圖片路徑方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
v-for循環(huán)圖片路徑
<template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="(item, index) in img" :key="index"> <!-- <h3 class="medium">{{ item }}</h3> --> <img :src="item.imgersssd"> </el-carousel-item> </el-carousel> </template> <script> import axios from 'axios' export default { name: 'HelloWorld', data () { return { msg:"dkjskjffdsfdds", img:[ {imgersssd:require("../images/u=29.jpg")}, {imgersssd:require("../images/u=4249.jpg")}, {imgersssd:require("../images/u=21967.jpg")}, {imgersssd:require("../images/u=30419.jpg")}, {imgersssd:require("../images/u=3422733.jpg")}, {imgersssd:require("../images/u=37901902.jpg")} ] } }, mounted(){ // this.getData() }, methodes:{ // getData(){ // axios.get().then(res=>{ // if(res.data.code == '200'){ // if(res.data.result && res.data.result.length>0){ // } // console.log(res) // } // },error=>{ // }) // } } } </script> <style> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>
v-for循環(huán)圖片無法顯示
解決方法
使用require調(diào)用路徑
<div v-for="(item, index) in imgList" :key="index"> ? ? <img :src="item"> </div>
<script> export default { ? data() { ? ? return {? ? ? ? imgList:['require("../../assets/a.jpg")','require("../../assets/b.jpg")'] ? ? }; ? }, }; </script>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
- vue中異步函數(shù)async和await的用法說明
- vue中用 async/await 來處理異步操作
- vue如何使用async、await實現(xiàn)同步請求
- 詳解vue中async-await的使用誤區(qū)
- vue如何在for循環(huán)中設(shè)置ref并獲取$refs
- Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法
- Vue 實現(xiàn)v-for循環(huán)的時候更改 class的樣式名稱
- vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法
相關(guān)文章
element表格el-table實現(xiàn)虛擬滾動解決卡頓問題
當頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,本文主要介紹了element表格el-table實現(xiàn)虛擬滾動解決卡頓問題,具有一定的參考價值,感興趣的可以了解一下2023-10-10vue-mugen-scroll組件實現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細介紹了vue-mugen-scroll組件實現(xiàn)pc端滾動刷新,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08vite+vue3+element-plus搭建項目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04