使用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>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
- vue中異步函數(shù)async和await的用法說明
- vue中用 async/await 來處理異步操作
- vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求
- 詳解vue中async-await的使用誤區(qū)
- vue如何在for循環(huán)中設(shè)置ref并獲取$refs
- Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
- Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱
- vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法
相關(guān)文章
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10vue使用elementUI組件實(shí)現(xiàn)分頁效果
分頁在展示數(shù)據(jù)列表的場(chǎng)景肯定是非常多的,一般的項(xiàng)目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實(shí)現(xiàn)分頁效果,需要的朋友可以參考下2023-12-12vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新
這篇文章主要為大家詳細(xì)介紹了vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,它的核心庫只關(guān)注視圖層,易于上手,也便于與其他庫或已有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于如何運(yùn)行vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-05-05vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Vue前端如何實(shí)現(xiàn)生成PDF并下載功能詳解
在前端的崗位上經(jīng)常需要實(shí)現(xiàn)個(gè)生成個(gè)并下載的可視化圖表頁P(yáng)DF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實(shí)現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下2021-10-10vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法
今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08ElementUI如何修改Dialog的標(biāo)題樣式
這篇文章主要介紹了ElementUI如何修改Dialog的標(biāo)題樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10