如何在Background-image:url中调用vue.js对象

Question

我有这个div，它使用background-image url渲染图像下面的第一个代码以静态方式工作得很好

<div class="image-input-wrapper" style="background-image:url(/storage/images/validations/my_main_image.png)"></div>

但是当我将图像的值基于obj时，就像下面的代码一样它不起作用

不工作

<div class="image-input-wrapper" style="background-image:url('/storage/images/validations/'+emvdetailsdata[0].card_image)"></div>

在我的第二个例子中有任何错误的实现吗?

vuejs

module.exports = function(data) {
var _data = {
config: null,
n: 1,
emvdetailsdata: Object,
};
return{
data: (() => Object.assign({}, data, _data)),
props: {
data_object: Object,
},
mounted() {
this.init();
},
methods:{
init(){
this.functionexample();
}
}
functionexample(){
this.emvdetailsdata = objt["emv"];
}}

Answer 1

如果你想让Vue计算一些属性，那么你需要绑定它。

v-bind:style="... 

:style="..

如果你不这样做，你的style属性将只有你传递给它的文本。

style="background-image:url('/storage/images/validations/'+emvdetailsdata[0].card_image)"

改为

:style="'background-image:url('/storage/images/validations/'' + emvdetailsdata[0].card_image + ')'"

或使用JS模板字面值(模板字符串)

:style="`background-image:url('/storage/images/validations/${emvdetailsdata[0].card_image})`"

const { createApp, ref } = Vue
const App = {
setup() {
const emvdetailsdata = ref([ { card_image: 'https://3.bp.blogspot.com/-f2XX6_CJNNc/VCaHU7fHwJI/AAAAAAAAGig/ORo4Kah5u-Q/s1600/simple-gray-texture.jpg' } ]);
return { emvdetailsdata }  
}
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
<div style="background-image:url(emvdetailsdata[0].card_image)">div 1</div>
<div :style="'background-image:url(' + emvdetailsdata[0].card_image + ')'">div 2</div>
<div :style="`background-image:url(${emvdetailsdata[0].card_image})`">div 3</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>