ReactJS不读取img标签src

问题描述

我有这个组成部分

     import leftArrow from "../../../../../assets/svg/left.svg";

    export const LeftArrow = (props) => {
  const {className,style,onClick} = props
  return (
    <div
      className="slick-arrow"
      style={{...style,display: 'block'}}
      onClick={onClick}
    >
      <img src={leftArrow} alt="arrow_left"/>
    </div>
  );
}

我正在为反应性圆盘传送带制作自定义箭头，问题是未显示图像。路径正确，但是图像是.svg图标。我也在用通天塔。有什么解决办法吗？

它只显示带有alt "arrow left"的未定义图片

解决方法

您忘记声明leftArrow路径，这就是为什么它不显示图像的原因。

 export const LeftArrow = (props) => {
  const leftArrow = 'path_of_img'
  const {className,style,onClick} = props
  return (
    <div
      className={className}
      style={{...style,display: 'block'}}
      onClick={onClick}
    >
      <img src={leftArrow} alt="arrow_left"/>
    </div>
  );
}

细微调整-您正在从道具中获取className，但未使用它。

,

您使用的导入方式错误。试试这个

 export const LeftArrow = (props) => {
  const leftArrow = "../../../../../assets/svg/left.svg";
  const {className,onClick} = props;
  return (
    <div
      className={className}
      style={{...style,display: 'block'}}
      onClick={onClick}
    >
      <img src={leftArrow} alt="arrow_left"/>
    </div>
  );
}