CODEWITHSUNDEEP
vue.js
yariv bar
yariv bar

Reputation: 976

Vue dynamic image change onmouseover doesn't work

in my vue app i have this image working fine:

<img src="@/assets/images/icon-filter-up.png">

but when i try to pass the value dinamically like so:

<img :src="imgLink">

and imgLink under data() is as follows:

imgLink: "@/assets/images/icon-filter-up.png"

the image is not found, any idea why is that? i thought it has something to do with using the @ sign but even when changing it to as many ../../../ as needed it still didn't work

Upvotes: 0

Views: 55

Answers (2)

lmarqs
lmarqs

Reputation: 1471

You can import a image and use it as a component attribute:

<template>
    <img :src="imgLink">
</template>
<script>
    import imgLink from '@/assets/images/icon-filter-up.png';

    export default {
        data: { imgLink }
    };
</script>

Upvotes: 1

Hammerbot
Hammerbot

Reputation: 16334

You should try to use the require function to get the url of your asset:

imgLink: require('@/assets/images/icon-filter-up.png')

Upvotes: 2

Related Questions