如何添加与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">
我能看到的唯一区别是胡须之间的间距。 感谢所有的帮助。
你可以这样做:
<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是什么。
我认为你的方法应该工作,如果语法被纠正
所以这:
<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>