目的:在鲤用elment ui组件el carousel(即走马灯组件)中,从数据库中读取图片路径到前端并成功显示图片。
遇到的问题:无法显示图片,报错的问题是无法读取图片路径,在百度后,得到解决办法。
解决办法:
以下为正确的代码段
<div class="block">
<el-carousel height="500px">
<el-carousel-item v-for="item in imagebox" :key="item.course_id">
<div id="itemAll">
<div id="item-title"><span>{{item.course_name}}</span></div>
<div id="item-context"><span>{{item.intro}}</span></div>
</div>
<div id="item-idView"><img :src="require('../assets/'+item.course_path)" class="image" style></div>
</el-carousel-item>
</el-carousel>
</div>
错误的代码写法:<div id="item-idView"><img :src="item.course_path" class="image" style></div>
正确的代码写法:<div id="item-idView"><img :src="require('../assets/'+item.course_path)" class="image" style></div>