一般我们使用 v-for 循环图片的时候习惯使用以下代码： 注：el-carousel 是vue的一个组件名，只需看 img :src=“item.url” 这一部分就行。 此时代码的运行结果为： 在平常的页面中，img:src是可以引用的，但是当把它放在data中，因为放在模版里是会被 webpack 打包出来 ，所以在 js 里写图片路径其实只是一个字符串，webpack 并不会处理。此时就需要使用 require 调用路径，就能解决问题。
Vue 中 v-for 图片不显示的解决办法 (亲测可用)
<el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in items" :key="item"> <img :src="item.url"> <!-- <img v-bind:src="item.url">--> </el-carousel-item> </el-carousel> <script> export default { name: "Solution", data() { return { items:[ { "url": "../../assets/sol-select3.jpg" }, { "url": "../../assets/sol-select3.jpg" }, { "url": "../../assets/sol-select3.jpg" }, ] }; }, }; </script>
我们可以看到，图片并没有显示出来。正确的 js 代码应该这样书写：<script> export default { name: "Solution", data() { return { items:[ { "url": require("../../assets/sol-select1.jpg") }, { "url": require("../../assets/sol-select2.jpg") }, { "url": require("../../assets/sol-select3.jpg") }, ] }; }, }; </script>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
