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>
Logo

前往低代码交流专区

更多推荐