使用vue v-for循环图片路径方式
时间:2022-06-27 08:49:11|栏目:vue|点击: 次
v-for循环图片路径
<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循环图片无法显示
解决方法
使用require调用路径
<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>
上一篇:vue3.0 项目搭建和使用流程
栏 目:vue
下一篇:vue编写的功能强大的swagger-ui页面及使用方式
本文标题:使用vue v-for循环图片路径方式
本文地址:http://www.codeinn.net/misctech/206044.html