Hi, thank you for the amazing package!

I would like to request an update to its dependencies. Right now I'm using blurhash version 2.0.5 and it seems that the vue version is a bit out of sync:

npm WARN [email protected] requires a peer of blurhash@^1.1.3 but none is installed. You must install peer dependencies yourself.

Hi again!

It seems that using click events do not work on the component... I tried this:

<blur-hash-image
     @click="myEvent()"
     width="400"
     height="300"
     hash="LdHfL}oJR$WBKnfi%3ofT0kCM{ay"
     src="https://images.unsplash.com/photo-1545910684-8e7c081be9b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
     alt="green lawn grass during daytime" />

And for some reason the event is never fired. Would it be necessary to pass attached events to the generated tag somehow?

First off thanks for the package, I had my own implementation before but yours is cleaner so I'm trying it out.

I'm using Vuetify for a project and when I use the <blur-hash-image> component on its own in a <v-flex> or even inside an <avatar> component it doesn't show anything on screen. It appears that the width is somehow set to 0 even though I explicitly set the width and height.

If I put the blur-hash-image component inside a <v-card> then the image shows up. Not sure what that is about but I would guess something is interfering with the css?

This has a canvas of width 0

<v-container>
        <v-layout row>
          <v-flex d-flex justify-end md4 sm6 sx12>
            <blur-hash-image
              :width="200"
              :height="200"
              :hash="foo.blurhash"
              :src="foo.thumbnail"
              alt=""
            />
          </v-flex>
     </v-layout>
</v-container>

This has a card with an image filling the width of the card not following the width defined on the blurhash image component.

<v-container>
        <v-layout row>
          <v-flex d-flex justify-end md4 sm6 sx12>
            <v-card
              class="mr-3"
              width="500"
              tile
            >
              <blur-hash-image
                :width="200"
                :height="200"
                :hash="image_src(vehicle).blurhash"
                :src="image_src(vehicle).thumbnail"
                alt=""
              />
            </v-card>
          </v-flex>
     </v-layout>
</v-container>

Hello again!

Unfortunately, it looks like something is different in your bundled version from 0.1.2 to 0.1.3 on npm. In the previous version, the folder structure was like:

vue-blurhash/
|----dist/
|--------vue-blurhash.css
|--------vue-blurhash.common.js
|--------...

And now is more like this:

vue-blurhash/
|----dist/
|--------css/
|--------js/
|------------app.45a8bcab.js
|------------vendor.45a8bcab.js
|--------...

I wasn't able to import it properly using the README instructions with this structure :(

Hi! Thanks for the amazing component.

I have one question. Is it possible to set an img srcset to the final image?

Hi, this is the error I was getting:
19:5 error The "VueBlurHash" component has been registered but not used vue/no-unused-components

This is what's on my home page:

<template>
  <div class="home">
    <blur-hash-image
      width="400"
      height="300"
      hash="LdHfL}oJR$WBKnfi%3ofT0kCM{ay"
      src="https://images.unsplash.com/photo-1545910684-8e7c081be9b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
      alt="green lawn grass during daytime"
    />
  </div>
</template>

<script>
import VueBlurHash from "vue-blurhash";

export default {
  name: "Home",
  components: {
    VueBlurHash
  }
};

and here is the main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueBlurHash from "vue-blurhash";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Vue.use(VueBlurHash);

Do you see a glaring mistake I made? Or do you have a live website example and code I could fork or look at? Thanks so much! Here is the github if that helps as well: https://github.com/daletom/blurhash-ex

Hi @damienroche,

Thanks for the lib!

In trying to adjust the height/width of the BlurHashImage, I noticed that the hardcode 100% values in the subcomponents are not respecting the height/width props.

Wondering what your thoughts are on passing those provided props into the style definitions?

Something like -

:style="`height: ${height}px; width: ${width}px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;`"

instead of

style="height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;"

I'm happy to submit a PR if it works for you.

Thanks!

Used it on several projects but abandoned it after realizing problems with render. I think the problem lies in canvas width and height (the browser takes time for rendering big canvases). Can you utilize canvas like there?

Width and height are small (32px) and it takes only aspect ratio for canvas rendering. Thank you.

I am rewriting vue-blurhash with vue 3 and I don't understand why someone would use blur-hash.vue instead of blur-hash-canvas?