Wie img src-Attribut mit VueJs

Question

In meinem NodeJS Route hinzufügen, ich habe folgendes:

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 }); 
    }); 
}); 

Die Daten sind ein JSON-Objekt alle meine Bildschirmfelder enthält. Eines der Felder ist eine base64-Darstellung eines Bildes.

Dann in meiner Liste Detail html Ich habe folgendes:

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

Dies wird sicherlich nicht funktioniert ... Wie kann ich mit dem Attribut src die base64 Informationen hinzufügen, die von NodeJS gesendet wurde?

Ich habe auch versucht die folgenden:

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

    }) 
</script> 

Aber es funktioniert offensichtlich nicht Dank

EDIT:

Seltsam, jetzt ist es funktioniert!

Hier ist, was ich getan habe:

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

Der einzige Unterschied, den ich ist der Abstand zwischen dem Schnurrbart sehen. Danke an alle, die geholfen haben.

Answer 1

Sie können es einfach so:

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

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

Achten Sie durch die Art und Weise, je nachdem, was Sie auf Ihrem String haben, können Sie einen Header an dem rohen Zeichenfolge hinzufügen.

<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> 

Natürlich sollten Sie herausfinden, was der Typ des Bildes ist, in diesem Fall.

Answer 2

Ich denke, die Methode, die Sie versucht, sollte funktionieren, wenn die Syntax dieses

So korrigiert worden ist:

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

    }) 
</script> 

sollte dies geändert werden:

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

    }) 
</script>