How to add img src attribute with VueJs

Question

In my NodeJs route, I have the following:

router.get('/list/:id', function(req, res, next) {
    request("http://localhost:3000/api/journal/" + req.params.id, function(error, response, body) {
        var json = JSON.parse(body);
        res.render('listdetail', { title: 'Journal', data: json });
    });
});

The data is a json object containing all my screen fields. One of the fields is a base64 presentation of an image.

Then, in my List Detail html I have the following:

<div id="app">
    <img class="materialboxed" src="{{data.base64Image}}" width="200">
</div>

This is surely not working... How can I add to the src attribute the base64 information that was sent by NodeJS?

I tried also the following:

<img class="materialboxed" :src=imagebase64Source width="200">
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        imagebase64Source: {{data.base64Image}}
      }

    })
</script>

But it obviously does not work Thanks

EDIT:

Strange, it's working now!

Here's what I've done:

<img class="materialboxed" src="{{ data.base64Image }}" width="200">

The only difference I can see is the spacing between the mustache. Thanks to all who helped.

Can you post the code that fetches the data and assigns it to imagebase64Source in the view? Also, you don't need to bind to data.base64Image, unless you have a data property in your view's data. — Artless
– Artless, Commented Apr 20, 2017 at 7:03
imagebase64Source: {{data.base64Image}} why are you using string interpolation? is your vue component created by some node templating engine? — Amresh Venugopal
– Amresh Venugopal, Commented Apr 20, 2017 at 7:06
@Artless - I am just retrieving this data from mongodb using mongoose. The data is fine, the "data" json objects is successfully sent to my view. My question is, how do I get the base64 data from that object and map it to my src attribute? — Felipe Caldas
– Felipe Caldas, Commented Apr 20, 2017 at 23:46
I am using string interpolation only to show that it does not work :) — Felipe Caldas
– Felipe Caldas, Commented Apr 20, 2017 at 23:46
Essentially what I need to know is how to add this base64 data, that has been sent to the client in the inline HTML src attribute If I simply write in the HTML {{data.base64}} it actually prints the data on screen. But i need to add it to my src. — Felipe Caldas
– Felipe Caldas, Commented Apr 21, 2017 at 0:26

FitzFish · Accepted Answer · 2017-04-20 07:15:58Z

1

You can do it simply like this:

<template>
    <div>
        <img :src="image"/> 
    </div>
</template>

<script>
    module.exports = {
        data: function() {
            return {
                image: //your b64 string there
            };
        }
    };
</script>

Pay attention by the way, depending on what you have on your string, you may have to add a header to the raw string.

<template>
    <div>
        <img :src="imgWithHeader"/> 
    </div>
</template>

<script>
    module.exports = {
        data: function() {
            return {
                image: //your b64 string there
            };
        },
        computed: {
            imgWithHeader() {
                return 'data:' + MIMETypeOfTheImage + ';base64,' + this.image;
            }
        }
    };
</script>

Of course you should figure out what is the type of the image, in this case.

answered Apr 20, 2017 at 7:15

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

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

4 Comments

Felipe Caldas Over a year ago

Hi @Cobaltway - thanks for your help.The base64 data is just fine, I don't need to work anything out in that sense. My problem is how do I get the data json object, that was sent from the server in the res.render('listdetail', { title: 'Journal', data: json }); line and add the data.base64Image information to the src attribute of my image. Does it make sense? Thanks

FitzFish Over a year ago

Well it seems that you are using a server-side templating engine (like Nunjuncks or Handlebars), cause res.render doesen't look like a VueJS related function. So you should take care cause its mustache syntax probably overlap with VueJS syntax. Look at the generated html and see if it fits Vuejs normal syntax for interpolation : vuejs.org/v2/guide/syntax.html#Text

FitzFish Over a year ago

If there is any conflict, you can change VueJS interpolation provider (replace {{}} by anything else), using this parameter: vuejs.org/v2/api/#delimiters

Felipe Caldas Over a year ago

res.render comes from NodeJs. Thanks and take care

savagemechanic · Accepted Answer · 2017-10-18 03:20:57Z

1

I think the method you tried should work if the syntax is corrected

So this:

<img class="materialboxed" :src=imagebase64Source width="200">
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        imagebase64Source: {{data.base64Image}}
      }

    })
</script>

should be changed to this:

<img class="materialboxed" :src="imagebase64Source" width="200">
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data () {
        return {
          imagebase64Source: data.base64Image,
        }
      }

    })
</script>

answered Oct 18, 2017 at 3:20

savagemechanic

443 bronze badges

Collectives™ on Stack Overflow

How to add img src attribute with VueJs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related