Попытка использовать response-image-gallery и я получаю ошибку «не могу загрузить изображение», даже если путь к файлу определенно правильный - PullRequest
0 голосов
/ 03 мая 2020

Я пытаюсь выучить React, но, честно говоря, это довольно обескураживает, что я даже не могу заставить работать сторонние библиотеки. У меня есть следующий код в моем приложении. js:

import React from 'react';
import './App.css';
import ReactDOM from 'react-dom';
import ImageGallery from 'react-image-gallery';

const images = [
  {
  original: 'images\Doodle1.png',
  thumbnail: 'images\Doodle1=thumb.png'
  },
  {
    original: 'images\Doodle2.png',
    thumbnail: 'images\doodle2-thumb.png'
  },
  {
    original: 'images\Doodle3.png',
    thumbnail: 'images\Doodle3-thumb.png'
  },
  {
    original: 'images\Doodle4.png',
    thumbnail: 'images\Doodle4-thumb.png'
  },
  {
    original: 'images\Doodle5.png',
    thumbnail: 'images\Doodle5-thumb.png'
  }
];

class Art extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

function App() {
  return (
    ReactDOM.render(<Art />, document.getElementById("root"))
  );
}





export default App;

Кроме того, когда я пытаюсь отобразить изображение в div "Gallery" в моем индексе. html, я получаю сообщение об ошибке, что это не DOM-узел, когда это, безусловно, так. Тем не менее, главная проблема, которую я хочу решить, это почему изображения не отображаются. Для моего приложения. css, у меня есть только одна строка в минуту:

@import "~react-image-gallery/styles/css/image-gallery.css";

Если кто-то может пролить свет на ситуацию, я был бы чрезвычайно благодарен, поскольку я чувствую, что я ударяя головой о кирпичную стену в минуту.

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Как вы упомянули в комментарии, у вас есть все jsx файлы в website/src и изображения в website/images. Поэтому нет, ваши заданные пути не будут работать.

Первым предложением было бы поместить ваши изображения в папку src или public, так как при сборке с реагированием (по крайней мере, create-react-app) эти папки используются.

Вы должны перейти к папке с изображениями, используя ../ и найти правильный путь. Пожалуйста, поделитесь структурой папок для точного пути.

Расширение RelativePath может быть полезно в VS Code.

Надеюсь, это поможет.

0 голосов
/ 03 мая 2020

все ваши пути к изображениям неверны вместо использования \ используйте /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...