如何动态使用image src？解决导入图片遭VS Code未使用提示，实现轮播正常显示

一、VS Code提示“导入的文件名称未被使用”的原因 #

• 导入图片变量后完全没在代码里引用：比如写了import banner1 from './assets/banner1.png'，但组件里根本没用到banner1这个变量，编辑器就会触发这个提示。
• 变量引用时拼写错误：比如导入的是banner1，用的时候写成了bannerL（数字1和字母l混淆），编辑器识别不到这是同一个变量，也会判定为未使用。
• 用动态路径却提前导入了变量：如果想通过动态拼接路径加载图片，却手动导入了所有图片变量，但实际代码里用的是require或其他动态方式，没用到导入的变量，自然会出现提示。

二、动态设置图片src实现轮播显示的方法 #

根据使用的构建工具不同，提供两种常用方案：

1. 基于Create React App（Webpack）的方案 #

用require动态加载图片，先准备好轮播数据数组（存图片文件名），再在组件里循环渲染：

const carouselData = [
  { id: 1, imgName: 'banner1.png' },
  { id: 2, imgName: 'banner2.png' },
  { id: 3, imgName: 'banner3.png' }
];

// 轮播组件渲染逻辑
return (
  <div className="carousel">
    {carouselData.map(item => (
      <img 
        key={item.id} 
        src={require(`./assets/${item.imgName}`).default} 
        alt={`轮播图${item.id}`}
      />
    ))}
  </div>
);

注意：Webpack需要明确图片的基础路径，不能完全动态传入整个路径，要固定基础目录，只动态修改文件名。

2. 基于Vite的方案 #

Vite推荐用new URL方式动态导入图片，写法如下：

const carouselData = [
  { id: 1, imgName: 'banner1.png' },
  { id: 2, imgName: 'banner2.png' },
  { id: 3, imgName: 'banner3.png' }
];

// 轮播组件渲染逻辑
return (
  <div className="carousel">
    {carouselData.map(item => (
      <img 
        key={item.id} 
        src={new URL(`./assets/${item.imgName}`, import.meta.url).href} 
        alt={`轮播图${item.id}`}
      />
    ))}
  </div>
);

如果之前是为了静态使用导入的图片，现在改成动态加载后，直接删掉那些没用到的导入语句，就能消除VS Code的未使用提示。

内容的提问来源于stack exchange，提问作者Meybinson Yáñez