Vue dynamic img with mouseover-CodePudding

I written vue code like that

<template>
    <nav id="header-nav">
        <router-link to="/" >
            <img id='header-logo' :src="curlogo" 
            @mouseover="curlogo=logo_over" 
            @mouseleave="curlogo=logo"/>
        </router-link>
    </nav>
</template>

<script>
export default {
    data() {
        return {
            logo: require("@/../public/logo.png"),
            logo_over: require("@/../public/logo_over.png"),
            curlogo: require("@/../public/logo.png"),
        }
    },
}
</script>

and it change img when i over mouse on img. But, I rewrite vue code by script setup. template code is same, and I change script code wlike that.

<script setup>
const logo=require("@/../public/logo.png")
const logo_over=require("@/../public/logo_over.png")
let curlogo = logo
</script>

but... It is not work. How can I use mouseover with img?

CodePudding user response：

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

<template>
  <nav id="header-nav">
    <router-link to="/" >
      <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.

CodePudding user response：

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

<template>
    <nav id="header-nav">
        <router-link to="/"  >
            <img  :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>