vuejs рендерит изображения динамически - PullRequest
0 голосов
/ 08 июня 2018

Я создаю своего рода чат-бота.У меня есть изображение пользователя, и иногда содержание сообщения также является изображением.

также полезно знать, что 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 голосов
/ 26 июня 2019

Когда вы используете шаблон String (заключаете некоторую строку в обратные символы) и хотите, чтобы какая-то переменная отображала свое значение, а не имя, вам нужно написать соответствующий код.

Попробуйте что-то вроде {{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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...