VUE style中设置background-image时的路径问题

1. VUE 在style中设置background-image时路径问题


在写一个自己的小案例的时候遇到了这个问题。

网上找了诸多案例基本上都是在data数据层写数组里面加上require('图片路径')这种写法。

//常见并且常用的方式
<script>
	data(){
		return{
			list:[
				{url:require('../1.jpg')}
				{url:require('../2.jpg')}
			]
		}
	}
</script>

而我想直接在style上去写,不想费劲的去在数据层写了

实际上require这个函数是可以直接在style里面加的与上同理上

代码如下↓

//奇奇怪怪的方式,很少能用到,不过这次我用到了
<template>
	<div class="list">
                    <div v-for="(item,key) in 9" :key="key" class="li">
                        <div class="inner">
                            <div :style="'background-image:url('+require('./../assets/examples/'+item+'.jpg')+')'" class="img"></div>
                        </div>
                    </div>
                </div>
</template>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值