Different banner image used for desktop and mobile screen sizes

Question

I'm having trouble with change banner image with the screen size. I need to use large image for large screen sizes and different image for mobile devices. This is the home page code looks like

 <heroic-banner :image="'Big-Banner.svg'" :placeholderImage="'banner-home-placeholder.jpg'" :overlay="0" :isBannerLoaded="isBannerLoaded">
...
</heroic-banner>

Here is the herioc-banner component.

    <template>
      <div v-if="graphics.placeholder.trim() !== ''" class="banner-wrapper heroic">
        <div class="image-loader-wrapper">
          <v-lazy-image
          :src="imageUrl"
          :src-placeholder="placeholderImageUrl"/>
        </div>
        <div class="slot-wrapper full-height">
          <slot></slot>
        </div>
        <div class="overlay" v-if="overlay" v-bind:style="{'opacity': overlay, 'background-color': overlayColor}"></div>
      </div>
    </template>

 computed: {
    imageUrl () {
      return require('../../../assets/images/banners/' + this.image)
    },
    placeholderImageUrl () {
      return require('../../../assets/images/banners/' + this.placeholderImage)
    }
  }

srcset does not work inside 'v-lazy-image' I tried it. Please advise me a better solution for this? This is vuejs project.

This is the code using srcset. using sample images!

<div class="image-loader-wrapper">
      <v-lazy-image
      srcset="https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png 320w, https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg"
      />
    </div>

Am I doing anything wrong here?

Not sure which library you are using for `v-lazy-image` but I guess it is this one which support `srcset` https://github.com/alexjoverm/v-lazy-image#responsive-images, So please show us your code where you tried to use `srcset` to help you any further — dreijntjens, Aug 03 '20 at 09:55
I update the code. when I change the resolution to less than 320 width it would not change the image. It showing same 'https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg' this image. — dglumesh, Aug 03 '20 at 19:02

Different banner image used for desktop and mobile screen sizes

0 Answers0