vuejs 动态渲染图像答案

【问题标题】：vuejs render images dynamicallyvuejs 动态渲染图像
【发布时间】：2018-11-18 07:23:06
【问题描述】：

我正在创建一个聊天机器人。我有一个用户图像，有时消息的内容也是图像。

也很高兴知道，userimage 是资产中的静态图像。作为内容的图像始终是之前上传的base64图像

故意留下样式块！

问题：vuejs 忽略了 v-bind。

<template>
<div class='chat-wrapper' id="chat-wrapper">
<div v-html = "messages"></div>


  </div>
</template>

<script>
  export default {
    name: 'App',
    data: {
      messages:"",
      imageData: ""  // we will store base64 format of image in this string
    },
    methods: {
      checkImage() {
        this.imageData =localStorage["image"]
      },
      startBlock(){
        let html = `   <div class='chat-message chat-message-sender'>
      <img class='chat-image chat-image-default' v-bind:src='./../assets/user.jpg' />
      <div class='chat-message-wrapper'>
        <div class='chat-message-content'>
          <img v-bind:src="imageData" class="startImage">
          <p>Check this image please</p>
        </div>
        <div class='chat-details'>
          <span class='chat-message-localisation font-size-small'>Time</span>
        </div>
      </div>
    </div>`
        this.messages = html;
        console.log(html)
      }
    },
      beforeMount(){
        this.checkImage();
        this.startBlock();
      },
  }
</script>

【问题讨论】：

忽略是什么意思？您是否看到特定错误或图像只是未显示？
只是没有显示。在 imagedata 中，它会显示“imageData”，
我明白了。如果我的理解是正确的，这些two links 可能就是您需要的。
imageData 是一个完整且有效的 base64 字符串吗？ <img :src="'data:image/jpeg;base64,' + imageData">
@LarsBeck 是的，我用多个在线解码器尝试过

标签： vuejs2

【解决方案1】：

当您使用模板字符串（用反引号括起一些字符串）并且希望某个变量呈现其值而不是其名称时，您需要相应地编写代码。

试试 {{imageData}}：

   <div class='chat-message chat-message-sender'>
      <img class='chat-image chat-image-default' v-bind:src='./../assets/user.jpg' />
      <div class='chat-message-wrapper'>
        <div class='chat-message-content'>
          <img v-bind:src="{{imageData}}" class="startImage">
          <p>Check this image please</p>
        </div>
        <div class='chat-details'>
          <span class='chat-message-localisation font-size-small'>Time</span>
        </div>
      </div>
    </div>

【讨论】：