node.js - 如何使用VueJs添加img src属性

Question

在我的 NodeJs route ，我有以下内容:

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>

这肯定不起作用...我如何将 NodeJS 发送的 base64 信息添加到 src 属性？

我还尝试了以下方法:

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

我能看到的唯一区别是 mustache 之间的间距。 感谢所有提供帮助的人。

Answer 1

你可以简单地这样做:

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

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

顺便请注意，根据字符串中的内容，您可能需要向原始字符串添加 header 。

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

当然，在这种情况下，您应该弄清楚图像的类型。