React中如何正确将导入的本地图片设置为img标签src属性

你的代码存在两处语法错误，导致img标签拿到的src值不是有效的图片资源地址，因此显示加载破损状态：

• 错误1：Slides数组定义不符合预期
  你写的const Slides = [{rms1}, {rms2}, {rms3}]使用了ES6对象简写语法，每个数组元素实际是{ rms1: 图片导入值 }结构的对象，并没有直接存储导入的图片资源本身。
• 错误2：src属性传值方式错误
  你写的src={{imageSource}}相当于给src属性传入了一个普通对象{imageSource: 数组元素}，但img标签的src需要接收字符串类型的资源路径/导入后的图片资源变量，无法解析普通对象。
  补充说明：JSX中的单大括号是语法标记，代表括号内部是JS表达式，给属性传值时不需要额外多包一层大括号。

步骤1：修正Slides数组定义 #

两种写法均可，根据后续扩展需求选择即可：

1. 直接存储导入的图片资源（写法最简单，适合仅需要展示图片的场景）

const Slides = [rms1, rms2, rms3];

2. 存储为带明确属性的对象（适合后续需要加图片说明、跳转链接等扩展字段的场景）

const Slides = [
  { src: rms1, alt: "治疗规划器界面" },
  { src: rms2, alt: "风险模块界面" },
  { src: rms3, alt: "聊天功能界面" }
];

步骤2：修正img标签的src传值 #

对应上面两种数组写法，分别调整传值逻辑：

• 如果使用第一种直接存资源的数组：去掉多余的大括号，直接取数组元素赋值

{Slides.map((imageSource, index) => (
  <img 
    className="slide" 
    key={index} 
    src={imageSource}
    alt="Slide"
  />
))}

• 如果使用第二种存对象的数组：取元素上的src属性赋值

{Slides.map((slide, index) => (
  <img 
    className="slide" 
    key={index} 
    src={slide.src}
    alt={slide.alt}
  />
))}

import React from 'react';
import './Slideshow.css';
import rms1 from './RMSTreatmentPlanner.png';
import rms2 from './RMSRiskMovers.png';
import rms3 from './RMSChat.png';

const Slides = [rms1, rms2, rms3];
const delay = 15000;

function Slideshow() {
  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);
  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }
  React.useEffect(() => {
    resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === Slides.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {
      resetTimeout();
    };
  }, [index]);

  return (
    <div className="slideshow">
      <div 
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {Slides.map((imageSource, index) => (
          <img 
            className="slide" 
            key={index} 
            src={imageSource}
            alt="Slide"
          />
        ))}
      </div>

      <div className="slideshowDots">
        {Slides.map((_, idx) => (
          <div 
            key={idx} 
            className={`slideshowDot${index === idx ? " active" : ""}`} 
            onClick={() => setIndex(idx)}
          />
        ))}
      </div>
    </div>
  );
}

export default Slideshow;

React中引用本地导入图片的规则非常简单：通过import导入的图片变量，直接用单大括号包裹传给src即可，不需要额外包对象、加引号或者手动拼接路径，打包工具会自动处理最终的资源路径替换。

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