background图片不显示_vue组件内部动态渲染src,图片不显示的解决办法

最近再做一个图片展示组件时候,发现在vue组件内部动态宣传src尽然图片显示不出来,百度一下,有很多解决办法,什么通过require加载呀,转为base64什么的,在我看来,统统都是很烂的解决办法,图片动态渲染不出来,那么我们就预先加载不就可以了吗?

上代码:

template:'',data: function () {        return {            fileList: [{name:"1",src:"/upload/1.jpg"},{name:"2",src:"/upload/2.jpg"}],         }    },  methods: {        loadImage: function (file)        {            var img = new Image();            img.src = file.url;            img.onload = function()            {                file.url = img.src;            }            return file.url;        },      }
可以通过以下步骤实现: 1. 在Vue组件中,定义一个data属性,用来存储当前点击的局部图片的信息,包括图片路径、文字内容等。 2. 在模板中,使用v-for循环渲染多张图片,通过v-on:click绑定点击事件,将当前点击的图片信息保存到data属性中。 3. 在模板中,使用v-if指令判断是否有局部图片被点击,如果有,则显示一个遮罩层和对应的文字信息。 4. 在遮罩层中,使用绝对定位和transform属性,实现局部图片的放大和移动效果。 下面是一个示例代码: ```html <template> <div> <div v-for="(item, index) in images" :key="index" @click="showDetail(item)"> <img :src="item.full" alt=""> </div> <div class="mask" v-if="current"> <div class="detail"> <img :src="current.detail" alt=""> <div class="text">{{ current.text }}</div> </div> </div> </div> </template> <script> export default { data() { return { images: [ { full: 'path/to/full/image.jpg', detail: 'path/to/detail/image.jpg', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }, // more images here... ], current: null } }, methods: { showDetail(item) { this.current = item } } } </script> <style> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 999; } .detail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 80%; max-height: 80%; } .detail img { width: 100%; height: auto; } .text { padding: 20px; color: #fff; font-size: 16px; line-height: 1.5; text-align: justify; } </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值