如何添加与VueJs img src属性

在我的NodeJs路由中，我有以下几点：

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

数据是一个包含我所有屏幕字段的json对象。 其中一个领域是一个图像的base64演示文稿。

然后，在我的清单详细html我有以下几点：

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

这肯定是行不通的…我如何添加到src属性由NodeJS发送的base64信息？

我也尝试了以下内容：

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

但它显然不工作谢谢

编辑 ：

奇怪，现在正在工作！

以下是我所做的：

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

我能看到的唯一区别是胡须之间的间距。 感谢所有的帮助。

Answer 1

你可以这样做：

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

注意的方式，取决于你的string，你可能必须添加一个标题的原始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> 

当然，在这种情况下，你应该弄清楚图像的types是什么。

Answer 2

我认为你的方法应该工作，如果语法被纠正

所以这：

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

应该改成这样：

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