Vue dynamic img with mouseover

Question

I written vue code like that

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

what is the intended outcome? could you please explain ur logic in mouseover and mouseleave please? — Kick Buttowski, Dec 28 '22 at 03:27
@KickButtowski When I over the mouse, img's src is `logo`. When I leave the mouse, imgs's src is 'logo_over'. — swz, Dec 28 '22 at 03:30
just an experiment can you omit :src="curlogo" out from ur code? — Kick Buttowski, Dec 28 '22 at 03:35

score 1 · Answer 1 · answered Dec 28 '22 at 04:10

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.

I refer to your code, and It work well. thanks – swz Dec 28 '22 at 04:29 — swz, Dec 28 '22 at 04:29

score -1 · Answer 2 · answered Dec 28 '22 at 04:29

-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>

answered Dec 28 '22 at 04:29

swz

63
6

You should not mix es6 and common js in one file. This leads to problems in some setups and is a bad style. Even if it works. Also the ˋgetImageUrlˋ is a non-sense function, as it only returns the passed value… – Leif Marcus Dec 28 '22 at 12:08
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 30 '22 at 08:13

Vue dynamic img with mouseover

2 Answers2