vue，动态修改img的引用地址（地址为项目中的，并不是服务器数据），路径正确无法显示问题

本文链接：https://blog.youkuaiyun.com/wasd2399/article/details/136211449

文章讨论了在Vue项目中，如何正确使用`import`语法导入图片资源，并在mouseover事件中动态改变图片路径的问题，以及`handleMouseEnter`函数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果这里没有使用 import pic2 from "@/assets/2.png"; 引入而是直接 src="@/assets/2.png" 则路径传递正确也无法展示出图片

正确的

<div class="left-price">
                <div class="item-top">
                    <img :src="imgpath" alt="" style="width: 100%;">
                </div>
                <div class="item-bottom">
                    <ul style="display: flex;list-style: none;padding: 0%; justify-content:                         
                     space-between;width: 100%;height: 80px;background-color: blueviolet;">
                        <li style="width: 20%;height: 80px;background-color: aquamarine;">
                            <img :src="pic2" alt="" style="width: 100%;height: 80px;"     
                             @mouseover="handleMouseEnter(pic2)">
                        </li>
                        <li style="width: 20%;height: 80px;background-color: aquamarine;">
                            <img :src="pic3" alt="" style="width: 100%;height: 80px;" 
                             @mouseover="handleMouseEnter(pic3)">
                        </li>
                        <li style="width: 20%;height: 80px;background-color: aquamarine;">
                            <img :src="pic2" alt="" style="width: 100%;height: 80px;" 
                             @mouseover="handleMouseEnter(pic2)">
                        </li>
                        <li style="width: 20%;height: 80px;background-color: aquamarine;">
                            <img :src="pic3" alt="" style="width: 100%;height: 80px;" 
                             @mouseover="handleMouseEnter(pic3)">
                        </li>
                    </ul>
                </div>
</div>

<script setup>
import { ref } from 'vue';

//这里是最关键的处理
import pic2 from "@/assets/2.png";
import pic3 from "@/assets/3.png";

let imgpath = ref(pic3)

const handleMouseEnter = (path) => {
    console.log(path)
    imgpath.value = path
}
</script>

样式无所谓

<style lang="less" scoped>
.detail-content {
    width: 1200px;
    height: 1000px;
    background-color: aqua;
    margin: 0 auto;

    .price {
        width: 100%;
        height: 400px;
        background-color: bisque;

        .left-price {
            width: 400px;
            height: 400px;
            background-color: azure;

            .item-top {
                width: 380px;
                height: 300px;
                background-color: burlywood;
                margin: 0 auto;
            }

            .item-bottom {
                width: 380px;
                height: 90px;
                background-color: rgb(224, 144, 40);
                margin: 0 auto;
            }
        }
    }
}
</style>