matteogabriele/vue-progressive-image

Vue progressive image loading plugin

vue-progressive-image's Issues

Error using blur prop on progressive-img component

Thank you for this,

Need a little help here, kind of a noob. I was testing the placeholder with blur as in the README:
.....
src="https://unsplash.it/1920/1080?image=10"
placeholder="https://unsplash.it/1920/1080?image=10"
blur="30"
....

And get this error:

[Vue warn]: Invalid prop: type check failed for prop "blur". Expected Number, got String.

found in

--->

Tried changing
blur="30" to blur=30.... No success

Can this be used in server-side rendering?

The easiest example is how do I set up to use vue-progressive-image in nuxt.js?

ssr: false, or if (process.BROWSER_BUILD) {} setting.

--
The error message is as follows.

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. HTML markup, for example nesting block-level elements inside

, or missing . Billing hydration and performing full client-side render.

FEATURE - Using srcset and different image breakpoints

Can we add support (if not already present) for srcset and different breakpoints?

Don't know how to get this to work in a vue-pwa, or a .vue single-file component...

Having trouble making this work in .vue single file component inside a vue-pwa template app...

first off... dunno where...

Vue.use(VueProgressiveImage)

...is supposed to go or what it's purpose is. my 'main.js' file looks like this...

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'
import App from './App'
import router from './router'
import VueProgressiveImage from 'vue-progressive-image'

Vue.use(VueProgressiveImage)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

...dunno if that is how it's supposed to be set up in the main.js file.

So, the component .vue file I'm trying to add vue-progressive-images to looks like this inside the script tag:

<script>
  import VueProgressiveImage from 'vue-progressive-image'

  export default {
    components: {
      'vue-progressive-image': VueProgressiveImage
    }
  }
</script>

...then I'm creating a slot in the template of the .vue file to use for the placeholder image tag, like so...

<slot name="background-image"></slot>

...then I'm trying to add this progressive-image html tag to a slot in an instance of the component, like so...

<progressive-img
        slot="background-image"
        src="../../assets/images/featured/venice-scene-1920x1200.jpg"
        placeholder="../../assets/images/featured/venice-scene-512x320-placeholder.jpg"
        alt="A sample google virtual tour."
      />

but I'm getting this error message for both the src and placeholder images:

but that same file path worked just fine before I tried to add the progressive-img tag, so I'm confident that this is not the problem.

Anyway, don't know how to make this work or fix it, so anything you can suggest would be awesome!

Thank you :-)

R

Adding IMPORT causes blank page

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Description

When I try adding, import VueProgressiveImage from 'vue-progressive-image' to my app.js file, in my Laravel project, the compiling the app returns a blank page. I remove the import, and my app loads as expected. Can figure out the issue!?

Environment

Run this command in the project folder and fill in the result:

npm ls vue-progressive-image: [email protected]

Then, specify:

1. Operating system: Mac OSX
2. Browser and version: Safari/Chrome (Latest)

relative image path

is it possible to just add the relative image path or it is mandatory to require the image and then serve it as a computed value?

Maybe a bug in mobile safari?

Description

I am noticing an issue that seems to effect mobile safari. I have a nested .vue component with named slots that is being used in a v-for loop to loop through an array of objects. When I use the normal <img> tag in the loop everything works as expected. When I use the <progressive-background> tag the text that is over-layed on top the image disappears on subsequent iterations through the loop, while it does not on the plain <img> tag version.

Expected behavior

The over-layed text should appear above every iteration through the array of objects of data. It works fine on desktop Safari, but not on mobile Safari.

Actual behavior

The over-layed text disappears on every subsequent iteration through the data.

Environment

[email protected]

1. Operating system:

macOS 10.12.6
iOS 11.0.1

2. Browser and version:

Desktop Safari - 11.0
Mobile Safari - The latest (don't know how to find out the exact version number)

Reproducible Demo

www.arrowgtp.com

So I have simply copied the component so that it loops through the data twice. The first loop is with the regular <img> tag and the second loop is with the <progressive-background> tag. On desktop Safari it renders properly through both loops, but on mobile Safari it does not render the over-layed text in the second loop, which is using <progressive-background> instead of <img>...everything else is the same, as far as I can tell...

I hope this all makes sense and you see the issue that is occurring...I don't have an android device, so I have not tested it yet on mobile android...will try to do so in the near future :-)

Thanks @MatteoGabriele :-)

Error when set blur to 0

Hi @MatteoGabriele ,
I try to set blur into 0 to disable blur function, but it doesnt work, the value always reset to default (5).. is there any way to disable it? thanks

Make fade-in duration a customisable parameter

Thanks for creating this great module. I have one request.
Before the placeholder is loaded, the image is faded in from grey (as it seems), but this goes a little bit too slow for my taste. Would it be possible to make this fade-in speed customisable per parameter, as you currently also already allow for blur amount and delay?

Variable usage

I'm having a data variables of movieBackdropSrc, which gets filled by an API. Now I want to be able to have the image loading, but it won't work.

Code I'm using: <progressive-background src="movieBackdropSrc" />.
I also tried <progressive-background :src="movieBackdropSrc" />.

Add support for pre-loader slot

Would be handy to have a place and logic to toggle pre-loaders.
The plugin knows perfectly when to display them or hide them

Not compatible with runtime-only build of vue

Hi,

I'm trying to use your library in my project, however it fails for not being compatible with the runtime-only Vue:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not   available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in component <progressive-img>)

As the runtime-only output a smaller size bundle, that would be great if you could provide a compiled version of vue-progressive-image.

Also as a side note, are you considering an option to define srcset for multiple image resolutions?

Thanks :)

onerror url

Is there a way to put a placeholder if the url is broken?

Why "width: 100%; height: auto" doesn't work ?

I'm trying to make the img responsive with these css attributes, but it doesn't work. Why? What can I do to make it responsive?

no-ratio issue

When i add no-ratio the image is not visible.
My problem is that my images got margin-bottom and if i add no-ratio attribute to image it become invisible.

Scroll stutter

Hi,

I've noticed that when using this library with multiple images (not many, maybe 8), the scroll becomes jagged. And when replacing the progressive-background component with simple images the lag seems to be gone.

Has anyone else experienced issues like this? Any idea on how to remedy this?

note:

In chrome dev tools rendering, when turning on "Paint Flashing" and "Scrolling Performance issues" nothing comes up. Also Chrome seems to be the most affected.

Is this module tested on Safari?

Description

A bug ?

Expected behavior

Smooth image change from blured to normal image.

Actual behavior

In Safari Version 11.0.1 (13604.3.5) when image is loaded it doesn't change smoothly. It flashes with white background and then slowly shows image.

(In Chrome it works flawless.)

Environment

npm ls vue-progressive-image:
└── [email protected]
Then, specify:

1. Operating system:
   Mac OS High Sierra
   Version 10.13.1 (17B1003)

2. Browser and version:
   Safari Version 11.0.1 (13604.3.5)

Reproducible Demo

// Just a background image in container:
...

    <div style="width: 100%; height: 300px;">
      <progressive-background
        :src="background"
        :placeholder="backgroundLow"
      />
    </div>

...

  computed: {
    background () {
      return require('../../assets/tech.jpg') // huge image
    },
    backgroundLow () {
      return require('../../assets/tech-low.jpg') // small image
    }
  },

Adding 'alt' text to the image

Is it possible to add the alt attribute to the generated image? It seems not possible right now.

How do I style these images?

I dropped the plugin into my app, then replaced an tag with it, and all the images in my v-for loop got super small...so I don't know what to do to make it work right, css wise. My standard CSS for images is:

img {
  width: 100%;
  height: auto;
}

...for all images to be responsive. So that apparently does not work for this plugin, so what is the appropriate styling for to work properly while still retaining responsive images?

Problems with progressive-background

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Installed OK and testing the progressive-background component. It loads the image, but it pushes the content that ought to be on top, below.

What are you reporting?

Currently I'm loading the image with as follows:

    <div :style="'background-image: url(../static/bg-image.png); no-repeat center center fixed; ' +
    '-webkit-background-size: cover;  -moz-background-size: cover;' +
    '-o-background-size: cover; background-size: cover;'">
... Login form
</div>

Replaced with:

<progressive-background src="../static/bg-image.png">
... Login form
</progressive-background>

Tell us what you think should happen.

The Login form content should be on top of the image.

Tell us what actually happens.
The image covers the login form

Environment

Run this command in the project folder and fill in the result:

npm ls vue-progressive-image: 2.1.2

Then, specify:

1. Operating system: Linux - Ubuntu 16.04
2. Browser and version: Chrome v.60

Editable CSS

Would be really handy have total access to the image itself and control dims and positioning of the <img> elem.

Pulling in from npm doesn't reflect latest features (e.g. alt prop)

Description

I pulled the package in from npm using yarn add vue-progressive-image getting version 2.4.2 (confusingly this repo's releases only goes up to v.2.3.1 as of 22nd Jan 2018)

Expected behavior

New alt tag feature implemented on 8db454b should be available

Actual behavior

Alt tag not available as a prop

Environment

npm ls vue-progressive-image: [email protected]

Presumably this is an issue with Npm not pulling in the latest github changes due to a release tag issue?
Many thanks for your great work :-)

Invalid prop: type check failed for prop "aspectRatio". Expected Number, got String.

Description

Despite the prop 'aspect-ratio' working correctly, it throws up this error in the console.

Example code

<progressive-img :src="result.img" placeholder="http://via.placeholder.com/350x350" aspect-ratio="1" />

Environment

[email protected]

Cannot get this to work inside of my component...

Soooo, I can get this to work with a basic image with basic CSS, like so:

progressive-img {
  width: 100%;
  height: auto;
}

...but I cannot seem to get it to work with more specific CSS inside of a custom vue component. the image simply does not show up at all.

Can you see anything in this CSS that might be causing an issue with the plugin?

This is the CSS of the parent component:

.component {
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url(../../assets/images/logos/arrow-favicon-blue-10-percent.svg) no-repeat center 25vh, #091830;
}

and here is the CSS of the progressive-image, which is a child of the parent .component:

progressive-img {
  width: 100vw;
  height: calc(100vh - 48px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  object-fit: cover;
  z-index: 1;
}

@media screen and (orientation: landscape) {
  progressive-img {
    width: 70vw;
    height: 100vh;
  }
}

Please let me know if you see anything, or if you need any more information to understand better. I looks like the image tries to load by flickering for a split second, but then it's gone, if that helps at all.

...I think it's almost there! XD

R

Expected String, got Null.

:src="post.image" fallback="no-image-available.png"
Invalid prop: type check failed for prop "src". Expected String, got Null.

Solution :
:src="post.image || 'no-image-available.png'" fallback="no-image-available.png"

Can we accept null and go to fallback without got error?

Image doesn't respect its original size

The image should be responsive, right now it stretch 100%

Suggestion: Read image from File object

I'm using this component as part of an editing page where a feature image may be updated. The src is bound to feature_image in state, and when the user selects a new image, this piece of state changes from a string containing the URL of the image, to the File object that will uploaded on save.

My suggestion is to have the component detect if the src is an instance of a file and, if so, read its contents and display the image.

Would this be possible?

Thanks for the great component, works well in my project. 👍

Add examples

Add examples on how to you the plugin to better understand how to use it and how to test it for future updates.

Dynamic URL

Hi Gabriele, excellent work. It would be better if you add support for dynamical URL. For example i load my background image url from another server, and my default image url it's just empty string. When i received response from another server whit two urls (small and full image) and pass urls to my background component and then to progressive-background component, nothing happens. Maybe nothing happens because vue-progressive-image load image on mounted event of lifecycle hooks. Is it possible to add functional for loading dynamic images url. I think it would be very helpfull.

image stretches

The image width should always be max the width of the image, not of the window

New Feature Request: Config to remove console logs

I'd prefer that this library doesn't contribute console.logs in a production app.
Would be nice if we could make this configurable.

I'd be happy to contribute with a PR if you don't have time to get to it.

canvas is undefined if progressive-background is not mounted

Description

When a progressive-background image is declared in JSX but is not displayed/mounted because of a v-if flag, it will throw an TypeError: Cannot read property 'getContext' of undefined

Expected behavior

The lib should either only load the image when mounted, or pre load but not draw to the canvas

Actual behavior

getContext is called but the canvas object does not exist yet

Option 'placeholder' isn't working when is used Vue.use(...)

Description

Placeholder config in option doesn't work how I expected, just work if I setup in each component, I'm trying to define a default for all components the same placeholder.

Expected behavior

I expect that setup made here changes all components in JSX mode

Vue.use(VueProgressiveImage, {
  placeholder: 'https://unsplash.it/1920/1080?image=20'
})

Using now just this

  h('progressive-img', {
    attrs: {
      src: 'someurl.here'
    },
    style: {
      width: '170px',
      height: 'auto',
      mixBlendMode: 'multiply',
      backgroundBlendMode: 'darken',
      marginBottom: '5px'
    }
  })

Actual behavior

When I'm using this, just works if I setup for each component like this:

h('progressive-img', {
  attrs: {
    src: params.row.miniatura,
    placeholder: 'https://media.giphy.com/media/cZDRRGVuNMLOo/giphy.gif'
  },
  style: {
    width: '170px',
    height: 'auto',
    mixBlendMode: 'multiply',
    backgroundBlendMode: 'darken',
    marginBottom: '5px'
  }
})

Environment

npm ls vue-progressive-image: -- [email protected]

Then, specify:

1. Operating system: Windows 10
2. Browser and version: Google Chrome Version 63.0.3239.84 (Official Build) (64-bit)

Reproducible Demo

The code was informed before

Support browser <script>tag import

For non node & npm apps, allow to import and use vue-progressive-image from script tag in browser, downloading the build file, and also we can use it via unpkg.com

Safari and Mobile Support

I am using this component in an app of mine and it works fine on Chrome. However, it fails to load the desired image on mobile chrome (iOS), mobile Safari (iOS), and Mac Safari v10.1.2. On all three browsers, it only displays the thumbnail image permanently and console.errors the message

The index is not in the allowed range.

disable margin-bottom

Is possible to disable the padding?

[Feature Request] - Background Video

@MatteoGabriele thanks for creating a great component and being very responsive in fixing things. As a suggestion for a future component, have you considered doing a background-video component?
I tried another component for this, but it had issues.

I've got it working outside of Vue using this codepen

dynamic background image not changed

When I change the page number, the old background image appears. When I change each page number, the previous background is displayed.

New Feature Request: Lazy Loading

Is lazy loading possible with this plugin?

It would be nice to have lazy loading on top of this blurry progressive loading. Thanks!!

onLoad Events

I would need an simple onLoad event for each image (full and placeholder) dispatched. Could you provide the possibility to pass such events?

<progressive-img @onLoad="onLoadMethod" @onLoadPlaceholder="onLoadPlaceholderMethod" />

Feature request: convert no-more and no-results texts to configurable variables

It would be awesome to make these texts configurable by the user

No results :(

No more data :)

BR's

Feature request: setting class names for <img> element

I would like an option to add class names to the <img> element within this component. For example,

<progressive-img src="/my-image.png" img-class="foo"/>

will render the component markup with the <img> element having the usual progressive-image-main class as well as the foo class.

Bind all images are loaded

Hello. I have several progressive-img components in my component. How can I bind all images were loaded dynamically.

Duplicate elements showing when adding style to progressive-background

Description

Duplicate elements showing when adding style to progressive-background

Expected behavior

Show the elements inside only once

Actual behavior

The elements get duplicated

Environment

npm ls vue-progressive-image: -- [email protected]

1. Operating system: Windows 10 Pro
2. Browser and version: Google Chrome - Version 66.0.3359.181 (Official Build) (64-bit)

Reproducible Demo

I created a new vue app and placed this in the generated Home.vue

<progressive-background style="height: auto; overflow: hidden; padding: 15px" src="https://picsum.photos/200/300/?blur">
    <p style="margin: 15px 0 0 0; font-weight: bold;">JOHN DOE</p>
</progressive-background>

Result:

If I remove style from progressive-background then the content will only show once

Blur on Progressive background also

First and foremost nice job with the library. I was wondering if its possible to add the blur to the original image as well or if you could suggest a way to do it dynamically.

Thanks!

Fallback doesn't have global option?

Problem using webpack (laravel 5.3 elixir) build

Hi, i can't show you a reproduction link right now but i will as soon as i can. i just really need to fix or find another solution to fix this issue.

so, the problem is with the webpack. when i'm using just the gulp watch, it runs ok..
but when i tried to run gulp --production. i got this error.
can you tell me why? thank you.

app.js:39 Uncaught TypeError: Cannot read property 'image' of undefined
    at Image.e.onload (app.js:39)
e.onload @ app.js:39

Add srcset attribute compatibility

A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use

the size of image can't zoom

如果原图大小是300x300px,设置img标签的width大于300px图片无法缩放，仍显示原图的width
the size of a image is 300x300px,when setting the img label style width <300px ,it's normal. but when setting the img label style width >300px,it will be abnormal.

v2.1.3 Failed to mount component: template or render function not defined

This may be me being stupid (quite likely :-D), but I'm getting the above error.

Expected behavior

<template>
<div>
  ...

  <progressive-background src="...">
    <!-- content to display -->
</progressive-background>

 ...
  </div>
</template>

<script>
import ProgressiveBackground from 'vue-progressive-image'

export default {
  components: {
    ProgressiveBackground
  },
...

</script>

Should display the progressive-background image with the content on top.

As a side note, I prefer not to use Vue.use(...) as a general rule. Only used for UI frameworks that are used throughout the app.

I've tried with Vue.use(ProgressiveBackground) still get the same issue.

Actual behavior

Getting the error above

Environment

Run this command in the project folder and fill in the result:

npm ls vue-progressive-image: 2.1.3

Then, specify:

1. Operating system: Linux
2. Browser and version: Chrome v60

Reproducible Demo

Error prevents that.