React中如何用本地项目图片渲染Hero页面轮播图？

问题根源 #

React项目中不能直接使用/src/images/xxx这类绝对路径加载本地图片，因为webpack打包后资源的实际路径会发生变化，直接写源码路径会导致找不到资源。

解决方案一：通过import引入本地图片（推荐） #

这种方式webpack会自动处理图片资源，打包时会将图片复制到输出目录并生成正确的路径。

修改图片数据配置代码： #

// 先导入本地图片，路径根据你的文件位置调整
import Home2 from '../images/Home2.PNG';
import Home3 from '../images/Home3.PNG';
import Home4 from '../images/Home4.jpg';
import Home5 from '../images/Home5.jpg';

export const mainCarouselData = [
  {
    image: "https://www.ethnicplus.in/media/mageplaza/bannerslider/banner/image/2/_/2_9.jpg",
    path: Home2, // 使用导入的图片变量
  },
  {
    image: "https://www.ethnicplus.in/media/mageplaza/bannerslider/banner/image/4/_/4_8.jpg",
    path: Home2,
  },
  {
    image: "https://manyavar.scene7.com/is/image/manyavar/HomePage_Hero_I_MGroom_M_23-05-2023-14-14?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: Home3,
  },
  {
    image: "https://manyavar.scene7.com/is/image/manyavar/Hero_banner_2_HP_D_GMSQUARD_06-06-2023-07-29?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: Home4,
  },
  {
    image: "https://manyavar.scene7.com/is/image/manyavar/Hero_banner_2_HP_D_GMSQUARD_06-06-2023-07-29?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: Home5,
  },
];

提示：import的路径要根据MainCarouselData.js的位置调整，比如文件在src/components下，图片在src/images下，路径就是../images/Home2.PNG。

JSX代码无需修改，保持原写法即可。

解决方案二：将图片放在public文件夹下 #

如果不想用import，可以把图片放到项目根目录的public文件夹里（比如创建public/images目录存放图片），然后使用相对public的路径：

修改图片数据配置中的path： #

export const mainCarouselData = [
  {
    image: "https://www.ethnicplus.in/media/mageplaza/bannerslider/banner/image/2/_/2_9.jpg",
    path: "/images/Home2.PNG", // 路径相对于public文件夹
  },
  {
    image: "https://www.ethnicplus.in/media/mageplaza/bannerslider/banner/image/4/_/4_8.jpg",
    path: "/images/Home2.PNG",
  },
  {
    image: "https://manyavar.scene7.com/is/image/manyavar/HomePage_Hero_I_MGroom_M_23-05-2023-14-14?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: "/images/Home3.PNG",
  },
  {
    image: "https://manyavar.scene7.com/is/image/manyavar/Hero_banner_2_HP_D_GMSQUARD_06-06-2023-07-29?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: "/images/Home4.jpg",
  },
  {
    image: "https://manyavar.scene7.com/is/image/manyavar/Hero_banner_2_HP_D_GMSQUARD_06-06-2023-07-29?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: "/images/Home5.jpg",
  },
];

这种方式webpack不会处理这些图片，打包时会直接复制public文件夹内容到输出目录，因此路径可以直接写/images/xxx。

内容的提问来源于stack exchange，提问作者xitij