[Vuejs]-Vue dynamic img with mouseover

by

1👍

According to this question you can use a code like below:

<template>
  <nav id="header-nav">
    <router-link to="/" class="logo">
      <img id='header-logo' :src="getImageUrl(curlogo)"
           @mouseover="logo='logo.svg'" @mouseout="logo='index.jpg'"/>
    </router-link>
  </nav>
</template>


<script setup>
import {ref} from "vue";
const getImageUrl = (name) => {
  return new URL(`../assets/${name}`, import.meta.url).href
}
const logo=ref('index.jpg');
let curlogo = ref(logo)
</script>

You should change ../assets/${name} and the name of images to your images paths and name.

-1👍

It is my final code, and it works well. thanks.

<template>
    <nav id="header-nav">
        <router-link to="/" class="" >
            <img class="header-logo" :src="getImageUrl(curlogo)" @mouseover="curlogo=logo_over" @mouseout="curlogo=logo">
        </router-link>

    </nav>
</template>
    
<script setup>
import { ref } from "vue";
const getImageUrl = name => {
    return name
}
const logo = require("../assets/logo.png")
const logo_over = require("../assets/logo_over.png")
const curlogo = ref(logo);
</script>

Leave a comment