nodegui/vue-nodegui

"Invalid argument" error while trying to display the image

Opened this issue · 0 comments

I cannot force the vn-image component to display the selected image from the disk. Both when I use the src parameter and the buffer I get an error message:

Error: Invalid argument
    at s.loadFromData (D:\Projekty\img-butcher\dist\main.js:1:49832)
    at buffer (D:\Projekty\img-butcher\dist\main.js:1:504356)
    at a.patchProp (D:\Projekty\img-butcher\dist\main.js:1:505049)
    at t.default (D:\Projekty\img-butcher\dist\main.js:1:516165)
    at T (D:\Projekty\img-butcher\dist\main.js:1:289542)
    at C (D:\Projekty\img-butcher\dist\main.js:1:289176)
    at b (D:\Projekty\img-butcher\dist\main.js:1:288774)
    at U (D:\Projekty\img-butcher\dist\main.js:1:296380)
    at L (D:\Projekty\img-butcher\dist\main.js:1:295667)
    at W (D:\Projekty\img-butcher\dist\main.js:1:291591)

My code:

<template>
  <vn-view id="main-view">
    <vn-text id="text">Select files:</vn-text>
    <vn-button @clicked="handleClicked">
      Load ...
    </vn-button>
    <vn-image
      v-for="file in selectedFiles"
      :key="`img-${file}`"
      :buffer="file"
    />
  </vn-view>
</template>

<script>
import { QPixmap } from '@nodegui/nodegui';
import { ref } from '@nodegui/vue-nodegui';
import path from 'path';
import { log } from 'util';
import selectImagesDialog from '../../utils/selectImagesDialog';

function mapPathToPixmap(imgPath) {
  const pixmap = new QPixmap();
  pixmap.load(path.normalize(imgPath));
  return pixmap;
}

export default {
  setup() {
    const selectedFiles = ref([]);
    return {
      selectedFiles,
      handleClicked: () => {
        const paths = selectImagesDialog();
        const pixmaps = paths.map(mapPathToPixmap);
        selectedFiles.value = pixmaps;
      }
    };
  }
}
</script>