Vue3 style directive with background-image produces 404 Error-CodePudding

I am assingning a reactive image link fetched from a database through axios.get like so:

<div class="main-image" :style="{'background-image': 'url('   state.articles.image[0]   ')'}">

Everything works fine, the background image of the div is changed correctly. The only problem is that my console throws:

GET http://localhost:3000/undefined 404 (Not Found)

Apparently this indicates that the url is pointing to nowhere, but how is that even possible when the background-image is displayed correctly? Nowhere in my CSS have I set a background-image property, only background: no-repeat center but even if I remove those the error persists. Any ideas how to get rid of the 404?

Running console.log(state.articles.image[0]) before sending it to the template produces the correct image link:

storage/brrAlEXfmEvoqjXiRhgalgzT9f2MfbX07Q4wDL0i.jpg

and even if I output the link in the template (in a h-tag for example) it shows the correct link, so what's wrong?

CodePudding user response：

The template will be rendered before state.articles.image[0] is known. The div tag is rendered and the browser will try to obtain the yet undefined background image url. One way around this will be to render the <div> only when the state is ready.

<div v-if="state.articles && state.articles.image[0]" class="main-image" :style="{'background-image': 'url('   state.articles.image[0]   ')'}">