vue循环渲染不同图片

关于 Vue 中循环生成图片方法

先上基础

在 Vue 中 img 图片的 src 的路径有两种索引方法：
1. 可以直接 <img src="路径" alt="一张图片">
2. 在 data 中 imgSrc: require(‘图片路径’) 然后 <img :src="imgSrc" alt="一张图片">

提出问题

那么如果想循环生成不同图片该怎么办？

思考一会儿。。。

思考半天后

解决问题

可以通过生成对象的方式解决问题如下：
1. 在循环组件中定义如下结构
```
  imgArr: [{imgSrc: require('路径1')},{imgSrc: require('路径2')},{imgSrc: require('路径3')},{imgSrc: require('路径4')},{imgSrc: require('路径5')}]
```
1. 循环时需要传递相对应的变量名称(字符串类型)
2. 循环结构写 <img :src="imgSrc" alt="一张图片">

Vue 加载图片时 loading 效果

就不多废话了直接上代码

<template><img :src="loadingUrl" alt="一张图片">
</template><script>
export default {data() {return {loadingUrl: require('loading路径'),imageUrl: require('要展示图片的地址'),}},mounted() {const newImg = new Image()newImg.src = this.imageUrlnewImg.onerror = () => { // 图片加载错误图片newImg.src = 'loading路径'}newImg.onload = () => { // 图片加载成功后this.loadingUrl = newImg.src}}
}
</script>

优化建议

上面代码可以优化为一个组件，组件只需要介绍需要加载图片的路径。
可以在 img 写一个 ref 和一个默认的 class 这样方便控制 loading 图片的样式，也方便控制加载成功后图片的样式，可以在 onload 写 this.$refs.image.className = ‘成功后的名字’ 给 img 添加成功后的名字。

vue循环渲染不同图片相关推荐

vue循环渲染本地图片不显示？
teamList: [{title: '大数据拍牌',imgUrl: './img/data.jpg',introduce: '5星服务:强烈推荐',cost: '15000',bail: '3次不中 ...
vue循环渲染子组件视图不更新问题
最近在写一个功能,使用v-for循环渲染子组件:代码如下: 当datas的数据发生改变时,按理子组件展现的数据也应该重新渲染,不过在使用的时候并没有达到这样的效果,但是将循环渲染的子组件改成html标 ...
vue循环渲染变量类样式
由于需求的需要,将五种不同的颜色样式通过v-for进行遍历渲染,所以我这里采用绑定类函数进行判断方式.代码: 效果: 灵感来自:https://www.jianshu.com/p/33e181be3d ...
Vue如何循环渲染图片
Vue如何把服务器返回的图片数据渲染出来首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求,设计稿如下就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
vue如何动态渲染本地图片img
动态渲染本地图片 <div class="wrap_left" v-for="item of array" :key="item.id" ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...

vue循环渲染不同图片

关于 Vue 中循环生成图片方法

先上基础

提出问题

思考一会儿。。。

解决问题

Vue 加载图片时 loading 效果

就不多废话了直接上代码

优化建议

vue循环渲染不同图片相关推荐

最新文章

热门文章