Home Image Create Responsive With An Optimal Number Of Images For All Devices

Create Responsive With An Optimal Number Of Images For All Devices

Image webcodeflow · May 17, 2022 · 0 Comment

Vue Responsive Image is a component of Vue that allows you to insert responsive image tags into your Vue project, provided you have an automated system that produces the various required image sizes.

The component calculates all source sizes and, based on the parameters passed, creates the appropriate <img> tag and its srcset attribute, and if necessary separate <source> tags for tablet image display and smartphone display.

background image responsive css, responsive background image, how to make image responsive

Display An Image In A Responsive Imagebox Without jQuery

How to make use of it:

Install & Download:

# NPM
$ npm install vue-responsive-image --save

1. VueResponsiveImage must be used as a component in your template.

<vue-responsive-image
    :image-url="'//via.placeholder.com/%width%x%height%'"
    :image-ratio="16/9"
  ></vue-responsive-image>

2. Complete set of options:

<vue-responsive-image
    :image-url="'//via.placeholder.com/%width%x%height%'"
    :error-image-url="'//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>

Create Responsive Image Tags For All Devices, Vue Responsive Image Plugin/Github