Как обновить внешне измененное изображение? - PullRequest
Новая
       11

Как обновить внешне измененное изображение?

0 голосов
/ 28 февраля 2019

Вот в основном то, что я пытаюсь сделать:

  • при нажатии кнопки, запросить сервер сделать снимок экрана

    adb exec-out screencap -p > $(pwd)/src/assets/screenshots/screen.png

    Поэтому я сохраняю результат в /src и убедился, что ответ был возвращен после завершения операции, чтобы предотвратить действия во время сохранения изображения.

  • После получения ответа от сервера (имеется в видуизображение изменено), за исключением изображения, которое будет обновлено.

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

Структура проекта: 

project

├── build
├── node_modules
├── server
│     ├── services
│     └── app.py
├── src
...   ├── assets
      │     ├── screenshots
      │    ...       └── screen.png
      ├── config
      ├── helpers
      ├── modules
      ├── index.html
      ├── index.js
     ...

Функция реагирования (экспериментировал по-разному)случаи): 

import React, { useState } from "react";
import { api } from "../helpers/api";
import * as config from "../config/client";
import IMG from "../assets/screenshots/screen.png";

const SS_ENDPOINT = config.endpoint + "screenshot";

function Home() {
  const [time, setTime] = useState(new Date().getTime());

  const ss = () => {
    api
      .get(SS_ENDPOINT)
      .then(ignored => {
        setTime(new Date().getTime());
      })
      .catch(e => console.log(e));
  };

  let images = require.context("../assets/screenshots/", true);
  let image = images("./screen.png");

  console.log(image);
  console.log(IMG);

  return (
    <div className="home">
      <img src={`${image}?${time}`} height={200} width={50} />
      <img src={`../assets/screenshots/screen.png?${time}`} height={200} width={50} />
      <img src={`/src/assets/screenshots/screen.png?${time}`} height={200} width={50} />
      <img src={`src/assets/screenshots/screen.png?${time}`} height={200} width={50} />
      <img src={IMG} height={200} width={50} />
      <img src={`${IMG}?${time}`} height={200} width={50} />
      <button onClick={ss}>SS</button>
    </div>
  );
}

export default Home;

Результат

Никаких изменений при нажатии кнопок, но я вижу, что при каждом щелчке он выбирает изображение, но оно по-прежнему является исходным.

resulting images, here blacks are initial images

Я не уверен, является ли этот подход правильным или есть лучший способ.Если подход, который я использую, неверен, поправьте меня.

TL; DR: Как отобразить внешне измененное изображение в реакции?Я пробовал ссылаться на изображение через require () или прямую ссылку, но, похоже, он всегда выбирает исходное из /build и никогда не меняет

...