如何添加與VueJs

在我的路線的NodeJS IMG SRC屬性，我有以下幾點：如何添加與VueJs

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

我能看到的唯一區別是鬍子之間的間距。感謝所有幫助。

來源

2017-04-20 Felipe Caldas

你能後，其獲取的代碼數據並將其分配給視圖中的'imagebase64Source'？此外，除非在視圖的「數據」中有'data'屬性，否則不需要綁定到'data.base64Image'。 – Artless

'imagebase64Source：{{data.base64Image}}'你爲什麼要使用字符串插值？是由某個節點模板引擎創建的vue組件嗎？ –

@Artless - 我只是用mongoose從MongoDB中檢索這些數據。數據很好，「數據」json對象成功發送到我的視圖。我的問題是，如何從該對象獲取base64數據並將其映射到我的src屬性？ –

你可以這樣做只是這樣的：順便說一下

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

當然，你應該弄清楚在這種情況下圖像的類型是什麼。

來源

2017-04-20 07:15:58 Cobaltway

嗨@Cobaltway - 感謝您的幫助。base64數據就好，我不需要在這個意義上做任何事情。我的問題是如何獲取數據json對象，這是從服務器發送的res.render（'listdetail'，{title：'Journal'，data：json}）;並將data.base64Image信息添加到我的圖像的src屬性中。是否有意義？謝謝 –

好吧，你似乎使用服務器端模板引擎（如Nunjuncks或Handlebars），導致res.render doesen看起來像一個VueJS相關的功能。所以你應該小心，因爲它的鬍鬚語法可能與VueJS語法重疊。查看生成的html並查看它是否符合Vuejs插值的正常語法：https：//vuejs.org/v2/guide/syntax.html#Text – Cobaltway

如果存在任何衝突，則可以更改VueJS插值提供程序（替換{{ }}），使用這個參數：https：//vuejs.org/v2/api/#delimiters – Cobaltway

我想，如果語法修正

您是否嘗試過的方法應該工作

所以這樣的：

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

來源

2017-10-18 03:20:57 savagemechanic

如何添加與VueJs

回答

相關問題