vuejs动态渲染图像

时间:2018-06-08 09:08:19

标签: vuejs2

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

也很好知道,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>

1 个答案:

答案 0 :(得分:0)

当您使用模板字符串(在反引号中包含一些字符串)并且希望某些变量呈现其值而不是其名称时,您需要相应地编写代码。

尝试类似{{imageData}}:

public bool AttachmentsCheck(string[] words)
{

    string currentWord;
    int wordCounter = 0;

    for (int i=0; i < words.Length; i++)
    {
        currentWord = words[i];
        for (int j = 0; j < currentWord.Length; j++)
        {
            char[] wordArr = currentWord.ToCharArray();
            for (int k=0; k < wordArr.Length; k++)
            {
                if (wordArr[k]==wordArr[wordArr.Length-k])
                {
                    wordCounter++;
                }
            }
        }
        if (wordCounter => 3)
        {
            return false;
        }
    }
    return true;
}