ReactJS не читает src тега img

#css #reactjs #react-slick

#css #reactjs #реакция-скользкая

Вопрос:

У меня есть этот компонент

      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. Я также использую babel. Какие-либо решения, пожалуйста?

Он просто отображает неопределенное изображение с помощью alt "arrow left"

Ответ №1:

Вы забыли объявить путь к левой стрелке, и именно поэтому он не отображает изображение.

  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 из реквизита, но не используете его.

1. Спасибо за ваш ответ, но он по-прежнему не отображается

2. Попробуйте использовать мой синтаксис. Я не уверен, что импорт работает так. Попробуйте добавить эту строку const LeftArrow = ‘../../../../../ активы/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>
  );
}