JSFiddle - React, Tailwind, and code Playground

by s_light

Vue

<template>
    <!-- <q-page class="flex flex-center content-stretch"> -->
    <q-page class="fit column no-wrap justify-center items-center content-center">
        <section class="">
            <q-file
                label="photos"
                v-model="files"
                accept=".jpg, .png, image/*"
                :filter="checkFileSize"
                @rejected="onRejected"
                multiple
                counter
                clearable
                use-chips
                filled
                append
            />
        </section>
        <section style="flex-grow:2;">
            <ul class="fit row wrap justify-evenly items-stretch content-center">
                <li
                class="card q-ma-sm"
                v-for="(item, index) in imageObjList"
                :key="item.id"
                >
                    <!-- <img
                    :src="item.objURL"
                    /> -->
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <image :href="item.objURL" x="0" y="0" height="100" width="100"/>
                        <path
                        d="M 1,1
                        L 80,1
                        L 20,20
                        L 20,20
                        z"
                        />
                        <path
                        :d="item.cornerPointsSVGPath"
                        />
                    </svg>
                    {{index}} <br>
                    qrdata: {{item.qrdata}} <br>
                    qrerror: {{item.qrerror}} <br>
                    cornerPoints: {{item.cornerPoints}} <br>
                    cornerPointsSVGPath: {{item.cornerPointsSVGPath}} <br>
                    <!-- {{qr_content(item)}} -->
                </li>
            </ul>
        </section>
        <section  style="flex-grow:2;">
            <ul>
                <li v-for="(userImageSet, index) in userImageSets"...