Style binding doesn't work with HTML image elements (Vue.js)

Question

In Vue, I'm trying to use style binding for the CSS "top" property of an HTML image element:

<img src="../assets/myimg.png" id="myimg" v-bind:style="[!ended ? 'top:20%' : 'top:80%']">

Here's the CSS for the image:

#myimg{
    position: absolute;
    width: 100px;
    height: 10px;
    left: 10%;
  }

"ended" is just a prop that this component receives from its parent. If it's false, the "top" property of the image should be 20%, otherwise, it should be 80%.

Unfortunately, the image stays at the same position regardless of whether "ended" is true or false. How can I resolve this?

tony19 · Accepted Answer · 2022-07-15 01:28:18Z

3

Here's the complete docs for style binding in Vue.js:

https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

In your case, you can use the object syntax:

<img src="../assets/myimg.png" id="myimg" v-bind:style="{ top: !ended ? '20%' : '80%'}">

Hope this helps!

edited Jul 15, 2022 at 1:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 5, 2019 at 9:34

Sarah Dominguez Perea

4082 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vktr Over a year ago

But what if I wanted to set 2 CSS properties? I know I can just define a style object in data and use that. But what if I wanted to place it inline instead of referencing an object from data? For example, the following code didn't work: v-bind:style="{ top,visibility: !ended ? '20%,visible' : '80%,hidden'}" How would I rewrite this to make it work?

Sarah Dominguez Perea Over a year ago

@Vktr Similar to normal objects, you have to input different properties as { prop1: val1, prop2: val2, prop3: val3 } and so on... So to add the visibility property to the above code:

<img src="../assets/myimg.png" id="myimg" v-bind:style="{ top: !ended ? '20%' : '80%', visibility: !ended ? 'visible' : 'hidden' }">

.

Ankit Agarwal · Accepted Answer · 2019-11-05 08:47:34Z

0

Try writing it inside brackets,

<img src="../assets/myimg.png" id="myimg" v-bind:style="[!ended ? {'top':'20%'} : {'top':'80%'}]">

answered Nov 5, 2019 at 8:47

Ankit Agarwal

1,35810 silver badges15 bronze badges

Comments

innocentwkc · Accepted Answer · 2019-11-05 14:48:44Z

0

Altenatively you can use this method:

<img src="../assets/myimg.png" id="myimg" v-bind:style="'top:' + (!ended ? '20%' : '80%')">

Or if you want to use es6 template literals:

<img src="../assets/myimg.png" id="myimg" v-bind:style="`top: ${!ended ? '20%' : '80%'}`">

The third altenative would be to add the dynamic style to a computed property as follows:

<img src="../assets/myimg.png" id="myimg" v-bind:style="dynamicStyle">

then in your script add the following code:

computed: {
  dynamicStyle() {
    return {
      top: !this.ended ? '20%' : '80%'
    }
  }
}

edited Nov 5, 2019 at 14:48

answered Nov 5, 2019 at 9:22

innocentwkc

6249 silver badges8 bronze badges

Collectives™ on Stack Overflow

Style binding doesn't work with HTML image elements (Vue.js)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related