关于在el-carousel走马灯中遇见的图片路径问题

在一般的前台项目中，通常都会运用到element组件库等，今天是在el-carousel走马灯展示图片时，遇到的问题。
html代码

<template>
  <el-carousel arrow="never" trigger="click">
    <el-carousel-item v-for="item in slides" :key="item">
      <img :src="item.image" :alt="item.title" />
    </el-carousel-item>
  </el-carousel>
</template>

script代码

<script setup>
import { reactive } from "vue";

// 定义一个图片路径变量
const slides = reactive([
  { image: "../assets/img/1.jpg", title: "轮播图图片1" },
  { image: "../assets/img/2.jpg", title: "轮播图图片2" },
  { image: "../assets/img/3.jpg", title: "轮播图图片3" },
]);

</script>

在这里我的想法是通过v-for循环进行走马灯图片展示，用v-bind（简写:）进行将img标签的src动态的显示。
但是问题就恰恰出在这里，路径没问题的情况下，控制台依然报错not found 404，表示服务器没有知道资源。
（这里浅浅的讲一下路径的题外话，./是同级，…/是上一级。）
我这里最开始以为是相对路径不行，又通过src的别名设置，从src路径出发,代码如下。（src路径别名设置在前面的文章）

<script setup>
import { reactive } from "vue";

// 定义一个图片路径变量
const slides = reactive([
  { image: "@/assets/img/1.jpg", title: "轮播图图片1" },
  { image: "@/assets/img/2.jpg", title: "轮播图图片2" },
  { image: "@/assets/img/3.jpg", title: "轮播图图片3" },
]);

</script>

结果不出意外，依然是404没有找到资源。在这里我又去搜索了其他的方法。看到了一个require方法。
这个方法好像只适用于使用webpack打包的vue项目，使用vite创建的vue项目中没有require方法。
（由于我是vite创建的vue项目，这里并不知道webpack创建的项目能否成功，但vite创建的vue项目并不能成功。）
它的报错内容为require is not defined。
解决方法见他人文章：解决方法
require也是引入，还有另外一个引入是import。

<script setup>
import { reactive } from "vue";
import url1 from "../assets/img/1.jpg";
import url2 from "@/assets/img/2.jpg";
import url3 from "@/assets/img/3.jpg";

// 定义一个图片路径变量
const slides = reactive([
  { image: url1, title: "轮播图图片1" },
  { image: url2, title: "轮播图图片2" },
  { image: url3, title: "轮播图图片3" },
]);

</script>

通过import引入后，再将值这样放进去。图片就能正常显示啦。