Рендеринг изображения base64, в настоящее время возвращается как пустой

Question

Я вытащил изображение из Microsoft graphQL и применил следующее перед сохранением строки в vuex.

Buffer.from(image).toString('base64')

Внутри моего компонента я пытаюсь визуализировать изображение следующим образом

<img class="shadow avatar border-white" :src="`data:image/jpg;base64,${this.$store.state.user.profilePhoto}`"/>

Я попытался добавить в микс charset-utf-8 и несколько вариантов, включая различные типы изображений, включая png и jpeg.

Класс CSS просто округляет изображение и добавляет немноготени.

В настоящий момент я получаю прозрачный круг, и изображение не найдено.

Есть ли другой способ кодирования изображения перед попыткой его визуализации?

Answer 1

Есть пара вещей, которые вы можете улучшить:

1. Вам не нужно добавлять this в ваши шаблоны (достаточно $store).

2. Я подозреваю, что ваше значение отсутствует в вашем магазине, когда шаблон компилируется. То, как вы обращаетесь к переменной, не сделает ее реактивной. Это означает, что если оно не является правильным значением при первой оценке, оно не изменится позже. Вместо этого вам следует обращаться к своим данным с помощью вычисляемого свойства - таким образом vue присоединит установщик и получатель, что позволяет обновлять свойство во время выполнения:

   <img :sry="imgSrc" />
   
   
   computed: {
     profileImg() {
       return this.$store.state.user && this.$store.state.user.profilePhoto;
     },
   
     imgSrc() {
       return 'data:image/jpg;base64,${this.profileImg}`;
     }
   }
   

Редактировать: КодироватьДанные изображения в dataURL

Если вы хотите преобразовать данные изображения в dataURL, который вы можете использовать в качестве значения src для тегов изображения, вы можете сделать это с HTMLCanvasElement:

function imageToDataURL(image) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.drawImage(image, image.width, image.height);
  return = canvas.toDataURL('image/png');
}

Эта функция предполагает, что у вас уже есть загруженное изображение. Если вам нужно загрузить изображение из URI, оберните его в функцию image.onload.