ReactJS 不读取 img 标签 src答案

【问题标题】：ReactJS not reading img tag srcReactJS 不读取 img 标签 src
【发布时间】：2020-09-25 08:13:56
【问题描述】：

我有这个组件

     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>
  );
}

我正在为 react-slick 轮播制作自定义箭头，问题是没有显示图像。路径是正确的，但图像是 .svg 图标。我也在使用巴别塔。请问有什么解决办法吗？

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

【问题讨论】：

你能展示一下你是如何导入leftArrow的吗？
leftArrow 是从哪里导入的？
抱歉我马上更新

标签： css reactjs react-slick

【解决方案1】：

您忘记声明 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>
  );
}

小调整 - 您从 props 获取 className 但没有使用它。

【讨论】：

谢谢你的回答，但还是没有显示
尝试使用我的语法。我不确定导入是否像那样工作。尝试添加这一行 const leftArrow = '../../../../../assets/svg/left.svg'

【解决方案2】：

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

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

【讨论】：