Using local file paths in v-lazy-image does not function properly

When trying to use the v-lazy-image plugin for my page banner with local image files, it does not seem to work.

<v-lazy-image
      srcset="../../../assets/images/banners/Small-Banner.svg 320w, ../../../assets/images/banners/Big-Banner.svg 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="../../../assets/images/banners/Big-Banner.svg"
      />

Interestingly, it works fine when using external links as shown below:

<v-lazy-image
      srcset="https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png 320w, https://blah/blah.png 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="https://blah/blah.png"
      />
cssvue.js

Answer №1

To display the image in your component, you will need to import it first. While there may be other ways to implement srcset, this is a simple method using only src.

EDIT: Now updated to include handling for srcset

<template>
    <img :src="banner" :srcset="bannerSizes" alt="Hero Image" />
</template>

<script>
import banner from "@/assets/images/banners/Small-Banner.svg";

export default {
    computed: {
        banner() {
            return banner;
        },
        bannerSizes() {
            return `
               ${this.size(this.banner, "300")}, 
               ${this.size(this.banner, "1440")}
            `;
        }
    },
    methods: {
        size(image, width) {
            return `${image} ${width}w`;
        }
    }
};
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring z-indices in event bubbling

JSFiddle: https://jsfiddle.net/uLap7yeq/19/ Issue Let's examine a scenario where there are two elements, canvas and div, positioned in the same location using CSS. The div has a higher z-index compared to the canvas, but how can we make sure events ...

javascriptjqueryhtmlcss

Tips on resetting the position of a div after filtering out N other divs

Check out this code snippet. HTML Code: X.html <input type="text" id="search-criteria"/> <input type="button" id="search" value="search"/> <div class="col-sm-3"> <div class="misc"> <div class="box box-info"> ...

javascriptjqueryhtmlcss

Showcasing Vue.js and Bootstrap: Tailoring classes exclusively for mobile devices

I'm looking to apply a class only on mobile devices. While I've achieved this using Vuetify in the past, it seems more challenging with Vue: Example: <div class="{'mobileSnackBar': breakpoint.xs}"> <p> This is my snackba ...

vue.jsvuejs2bootstrap-4

Accessing the baseURL within a Vue.js method using the Vue Router – a guide

Is there a way to generate a string that combines the base URL /get-it with a randomly generated string in my method? methods:{ GenerateURL(){ ... } } I'm wondering how I can accomplish this. Is there a method to retrieve either the base URL or just ...

vue.jsvuejs2vue-componentvue-router

Swapping out the JSON data from the API with HTML content within the Vue.js application

I am currently working on a project involving Vite+Vue.js where I need to import data from a headless-cms Wordpress using REST API and JSON. The goal is to display the titles and content of the posts, including images when they appear. However, I have enco ...

javascripthtmljsonvue.jsheadless-cms

Positioning parent and child elements using CSS

If you have a moment, please check out this URL where I've provided a more detailed explanation of the issue: How to Make an Image Responsive Within a Division I am looking to adjust the width of .slider-wrapper to 100%. Can anyone advise on how to u ...

htmlcsstwitter-bootstrap

Tips for minimizing the dimensions of images in a slideshow within a gallery

Check out this website: The slideshow images on there are too tall. Can someone assist me in lowering the height of the images? I want both images to be displayed at the same height. Thank you in advance. ...

cssslideshow

Resizing Images with 'fitin' Attribute in HTML

When I upload images to my shop's site on Rakuten, the platform requires them to be 128px in size. However, my shop uses 255px for every image. The uploaded images are named like this: "xxx.jpg?fitin=128:128". I changed the size to 255px, but now the ...

htmlcssimagesize

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

Purchased a theme called HelpGuru and encountering issues with the CSS of the menu. Reached out to support but they were unable to assist, directing me to a company that specializes in customizing WordPress themes instead. The link to the demo can be found ...

csswordpressmenupseudo-class

How can I troubleshoot email validation issues in Vue.js?

<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...

javascriptvue.js

Mounted class not initiating transition in Vue.js

After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state: However, when I used setTimeout to delay the class change, the t ...

javascriptcssanimationvue.jscss-transitions

Exploring the art of capturing multiple images in Vue.js

I am facing an issue with capturing multiple images in my Vue function and passing them to the controller. My blade file works perfectly fine when using a normal form, but I'm struggling to make it work with Vue specifically in the image section. Any ...

laravelvue.jslaravel-7

My custom CSS in React is being overshadowed by the default Bootstrap styles

View project image Currently working on a React project that requires Bootstrap. However, I am facing issues with Bootstrap overriding my custom CSS. Some default Bootstrap styles are affecting my headings. I have attempted various solutions such as placi ...

cssreactjscdn

Unselecting tabs in Vuetify

Trying to unselect the v-tabs component programmatically seems to consistently default back to selecting the first tab no matter what. Setting the v-model to -1 successfully deselects it at initialization, but once a tab has been selected there appears to ...

vue.jsvuetify.js

Vue 3 - Non-reactive object properties

How do I ensure that userInfo.value.email is reactive in this Vue3 component: <script setup> import { useUserStore } from '../store/user'; import { storeToRefs } from "pinia"; const userStore = useUserStore() const ...

vue.jsvue-composition-apivue-reactivity

Combining Multiple Results into One Unique Output using a Lodash Function

<span v-for="r in results" >{{ r.owner.first_name }} {{ r.owner.last_name}} </span> I want to ensure that only one occurrence is displayed for the result. So, with the provided code snippet, I am currently seeing: John Doe John Doe John ...

vue.jsvuejs2lodash

Is there a way to shift the display of inline-block to the right?

I'm struggling with positioning a div that's nested within a display:inline-block. How can I align it to the right side of the container? <div style='width:100%'> left <div style='display:inline-block;position:relative;r ...

htmlcss

Ways to align div elements

I am currently in the process of developing my own custom animation player. Utilizing Three.js for object rendering has been successful so far. However, the challenge lies in incorporating control options at the bottom of the player interface (such as play ...

javascriptjqueryhtmlcss

Make the width of a table column match the width of the header

I am currently using Primeng2 datatable and I am looking to adjust the column width to match the header size. This is my HTML code: <p-dataTable #dtselfcollectmonthly [exportFilename]="exportname" [rows]="10" [value]="rawdatatrucks"> <ng-con ...

htmlcssangularprimeng

Unable to maintain the height of a div at 100% as it keeps reverting back to 0px

I'm having trouble setting the height of the individual parent columns (and their children) to 100% because for some reason, the div height keeps resetting to 0. The first column contains two child boxes that should each take up 50% of the page heigh ...

htmlcss