[Vuejs]-How to make a logo image in the centre of QRcode in Vue?

by

0👍

You can put any image on your Qrcode as long as your scanner detects them because they basically cover the center part of the Qrcode!

<template>
  <figure class="qrcode">
    <!-- Any qrcode component you like goes here -->
    <vue-qrcode
      value="https://github.com/fengyuanchen"
      tag="svg"
      :options="{
        errorCorrectionLevel: 'Q',
        width: 200,
      }"
    ></vue-qrcode>
    <img
      class="qrcode__image"
      src="https://avatars.githubusercontent.com/u/3456749"
      alt="Chen Fengyuan"
    />
  </figure>
</template>

<style scoped>
.qrcode {
  display: inline-block;
  font-size: 0;
  margin-bottom: 0;
  position: relative;
}

.qrcode__image {
  background-color: #fff;
  border: 0.25rem solid #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
  height: 15%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
}
</style>

image on Qrcode: source

Leave a comment