Vue Responsive Image is a Vue component that allows you to quickly insert responsive image tags in your Vue project, provided you have some automated system that produces the various sizes of images required. The component calculates all source sizes and, depending on the parameters passed, generates the appropriate <img>
tag and its srcset
attribute and, if needed, separate <source>
tags for tablet portrait and smartphone views.
You need to have some system that automatically generates the images for you when an URL with the appropriate format is called, for example: http://via.placeholder.com/1920x1080
npm install --save-dev vue-responsive-image
Import the component in the *.vue
template that uses it
import VueResponsiveImage from 'vue-responsive-image'
Just copy the ResponsiveImage.vue
component somewhere in your project and import it in the templates that need it. Remember that this way your component won’t be automatically upgraded with bugfixes and improvements, though!
You can also include the script you find in the dist/
folder called vue-responsive-image-web.min.js
. This way you can use it directly in simple Vue-based pages. To find out how to include it, check the HTML file in web-test/web-test.html
. Keep in mind that in this case your component won’t be automatically upgraded unless you manually update the script.
VueResponsiveImage must be used as a component in your template.
Minimal usage:
<vue-responsive-image
:image-url="'http://via.placeholder.com/%width%x%height%'"
:image-ratio="16/9"
></vue-responsive-image>
Complete set of options:
<vue-responsive-image
:image-url="'http://via.placeholder.com/%width%x%height%'"
:error-image-url="'https://via.placeholder.com/160x90.png/09f/fff?text=Not+Found'"
:show-error-image="true"
:width-on-screen="50"
:width-on-screen-tablet="75"
:width-on-screen-smartphone="100"
:image-ratio="16/9"
:alt="'test1'"
:image-class="'vw50'"
:mode="'all'"
></vue-responsive-image>
You can find a simple demo here: https://codepen.io/paolomioni/pen/PeNoQg
This plugin is based on the analyses I made for my clients, and explained in an article I wrote which you can find here:
Applying srcset
: choosing the right sizes for responsive images at different breakpoints
This plugin assumes that you are using the same image, with the same proportions (the same width and height ratio), for all breakpoints. It might support different ratio images in the future.
It also assumes that you will use the same image width for desktop and tablet landscape, but that you might need a different overall image width for tablet portrait and smartphone.
For example, your image might occupy 33% of the screen on desktop, 50% on tablet portrait, and 100% on smartphones. This requires completely different sizes for the final images in the HTML, and the plugin calculates those for you. This is by far the most common use case according to my experience.
There is a unit test suite made with mocha-webpack. Just clone the project, install with npm, and run npm run test
.
config
parameter? Not sure if it’s neededFeel free to contact me with proposal, requests, and pull requests. Bugs and issues should be submitted on the GitHub page of the project.
Author: HCESrl
GitHub: https://github.com/HCESrl/vue-responsive-image
#vuejs #javascript #vue #vue-js