Question

在我的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表示。

然后，在我的List Detail 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>

请注意，根据字符串上的内容，您可能需要在原始字符串中添加标题。

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

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

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>

如何使用VueJs添加img src属性

2 个答案: