Rendering a javascript image object using VueJs

Question

How to render a javascript image object in the view using VueJs. I have added a sample code below. But the "v-html" tag is not rendering the image.

<div id="test">
  <span v-html="imageTemp"></span>
</div>


<script>
    new Vue({
        el: "#test",

        data: {
            imageTemp: new Image()
        },

        mounted: function() {
            this.imageTemp.src = "/temp.png"
        }
    });
</script>

What is the best method to do this?

I know how to render an image using "v-bind:src".

Also, using jQuery it is possible to add the image object to the view using: $("#test").append(this.imageTemp);

I would like to know whether there is a way to render the javascript image object on the view using VueJs.

To render an image, you or some library will have to produce this string: <img src=... />. For now, Vue doesn't do Image Object to HTML representation of image so you must do that on your own. — Manish
– Manish, Commented Nov 29, 2017 at 7:34

Raydoan Anik · Accepted Answer · 2017-11-29 07:42:08Z

3

you can use it as simple as possible.

 new Vue({
        el: "#test",
        
      data: {
	imageTemp: '<img src="/temp.png">'
	}
    });

<div id="test">
  <span v-html="imageTemp"></span>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

answered Nov 29, 2017 at 7:42

Raydoan Anik

2193 silver badges16 bronze badges

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

1 Comment

Arun D Over a year ago

I know this method of rendering image. I wanted to know whether there is a way to render the javascript image object on the view.

bbsimonbb · Accepted Answer · 2017-11-29 08:50:32Z

1

The Image object that you use is for creating images in memory, for manipulating them with Canvas and such like. You can use it for displaying an image on the page by appending it to an element, but why do you want to construct your page procedurally like this?

If you want to do this, you need to attach the javascript Image to an element in your doc. In Vue, when you want to access html elements, give them a ref. So...

<div id="test">
  <span ref="putImageHere"></span>
</div> 

<script>
    new Vue({
        el: "#test",
        mounted: function() {
            var img = new Image();
            img.src = "/temp.png"
            this.$refs.putImageHere.appendChild(img);
        }
    });
</script>

v-html is one of those tags to use only when you really need it. v-html snippets are not dynamic.

edited Nov 29, 2017 at 8:50

answered Nov 29, 2017 at 8:05

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

2 Comments

Arun D Over a year ago

I know this method of rendering image. I wanted to know whether there is a way to render the javascript image object on the view.

user2080225 Over a year ago

once you attach a Vue object to an element, then Vue will completely control that element. If you hack the DOM yourself, then Vue will just overwite your DOM with what is supposed to be there based on its template. If you don't want a template in charge of the content, then don't make it inside a Vue element.

user2080225 · Accepted Answer · 2017-11-29 07:29:06Z

0

Why don't you just use an img tag, and then have it's src attrubute be the thing that is getting set dynamically. That's the way it's usually done.

However if for some reason you must have the img tag itself be dynamic then you just need to still go ahead and put the img tag in your template, but just use the 'v-if' to make it render only when needed.

answered Nov 29, 2017 at 7:29

user2080225

2 Comments

Arun D Over a year ago

I know this method of rendering image. I wanted to know whether there is a way to render the javascript image object on the view.

luismartinezs Over a year ago

How do you mean? an Image object is usually added to html by using something like someNode.appendChild(img)

Collectives™ on Stack Overflow

Rendering a javascript image object using VueJs

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related