如何从函数返回的对象中提取正确的图片URL赋值给img标签的src属性

你当前的workoutImage函数返回的是单个键值对组成的对象，而非直接的图片路径字符串，因此无法直接赋值给img标签的src属性使用。

方案1：优化随机图片函数（更推荐） #

你原有的图片数组不需要嵌套对象，直接存储路径字符串即可，修改函数代码如下：

function workoutImage() {
  // 直接存储路径字符串，去掉多余的对象嵌套
  const images = [
    "./images/workout-image1.jpg",
    "./images/workout-image2.jpg",
    "./images/workout-image3.jpg",
  ];
  const imageIndex = Math.floor(Math.random() * images.length);
  // 直接返回路径字符串，可直接给img的src赋值
  return images[imageIndex];
}

export default workoutImage;

方案2：不修改原有函数，调用时提取路径 #

如果你需要保留原有函数的对象返回结构，可以在拿到返回值后提取对象内的路径值：

// 组件内调用逻辑
const imageObj = workoutImage();
// 提取对象的第一个属性值，也就是图片路径
const workoutImagePath = Object.values(imageObj)[0];

之后把workoutImagePath赋值给img的src属性即可。

额外注意事项 #

1. 你当前组件代码中调用的函数名是workoutImageDraw()，而你导出的函数名是workoutImage，需要确认命名对应，否则会触发函数未定义报错。
2. 你当前把随机图片的调用放在组件顶层，循环渲染所有训练项时都会使用同一张随机图。如果需要每个训练项对应不同的随机图，需要把函数调用放到map的循环体内部：

{showWorkouts &&
  showWorkouts.map((workout, key) => {
    // 每次循环生成独立的随机图片路径，若用方案1可直接取返回值赋值给src
    const workoutImg = workoutImage();
    const imgPath = Object.values(workoutImg)[0];
    return (
      <Image key={key}>
        <Link to={`/exercise/` + workout.id}>
          <img src={imgPath} alt="训练配图" />
        </Link>
      </Image>
    )
  })}

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