很多页面都会用到跑马灯效果，跑马灯需要大量的图片资源，一行行写实再太繁琐，我想到可以用v-for动态渲染列表，获取图片的src信息，这样就可以让代码更简洁~

上代码

<el-carousel-item v-for="(item,index) in imgUrl" :key="index">
     <img :src="item.url" alt=""/>
</el-carousel-item>

const imgUrl = [
  {url: require("../assets/images/01.jpg")},
  {url: require("../assets/images/02.jpg")},
  {url: require("../assets/images/03.jpg")}
]

require

因为我的项目是基于vite开发的，所以我最初引入require的时候，虽然根据提示安装配置了require，但是还是一直报错，去网上寻找解决问题，发现require是基于webpack的，vite并不支持，当然，vite官网也给出了解决方案[静态资源处理 | Vite 官方中文文档 (vitejs.cn)](https://vitejs.cn/vite3-cn/guide/assets.html#importing-asset-as-url)，但是太繁琐了，所以我有一个大胆尝试：在vite里使用require，还真让我找到了。

解决方法

npm i vite-plugin-require-transform --save-dev 然后在vite.config.ts中进行配置

import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform' // 1. 引入插件

export default defineConfig({
    plugins: [
        // 2. 添加以下代码
        requireTransform({
            fileRegex: /.js$|.vue$/,
        }),
    ],
})

一些后续

在uniapp中，如果不是使用vite创建的项目，可能不能使用上述方法，下面是一个比较好的解决方案

<view class="bar">
		    <image v-for="item in images" :key="item.id" :src="item.src" class="icon"></image>
		</view>

data() {
	    return {
		  images: [
				{		
				  id: 1,
				  src: '../../static/GSM.png'},
				{
				  id: 2,
				  src: '../../static/TD.png'},
				{
				  id: 3,
				  src: '../../static/LTE.png'},
				{
				  id: 4,
				  src: '../../static/待建站.png'},
				{
				  id: 5,
				  src: '../../static/目标站.png'},
				{
				  id: 6,
				  src: '../../static/需求站.png'},
				{
				  id: 7,
				  src: '../../static/口径.png'},
		  ]
	    };