Загрузка изображений из пути, созданного GET-запросом в React - PullRequest
Новая
       20

Загрузка изображений из пути, созданного GET-запросом в React

0 голосов
/ 25 марта 2020

Я пытаюсь загрузить изображения в моем интерфейсе React из массива путей, полученных после запроса GET, к flask бэкэнду. Сначала я пытался просто перебирать массив и требовать () каждое изображение, но я обнаружил, что переменные не требуются. Пути к изображениям выбираются следующим образом: 

async getImages() {
    var self = this;
    await Axios.get('/getImages', { params: { number: 10, category: "front" } }
    ).then(function (response) {
      console.log(response)
      self.setState({ imagePaths: response.data.img_links, imageNames: response.data.img_names })
    }).catch(function (error) {
      alert(error);
    });

  }
  async componentDidMount() {
    await this.getImages();
    console.log(this.state.imagePaths[0])
    this.setState({ imagesLoaded: true })


  }

и отображаются: 

render() {
    return this.state.imagesLoaded && this.state.imagePaths.map(item => {
        return (
            <div key={ item }>
                <img src={'./'+item} />
            </div>
        );
    })
  }

Приведенный выше код находится в Front. js, а структура каталогов следующая:

-react-frontend

- ср c

--- компоненты

---- Фронт. js

---- images

Каждый путь в imagePaths является 'images / imgName.jpg'. Однако когда я попадаю на эту страницу в моем веб-приложении, изображения не загружаются. Мне интересно, если это потому, что папка с изображениями находится не в том месте, или я делаю что-то еще неправильно.

Заранее спасибо!

...