Как проверить, был ли актив добавлен из public / dir в React?

Question

Можно ли проверить, существует ли файл в каталоге /public/?

У меня есть набор изображений, которые соответствуют некоторым объектам.Когда это возможно, я бы хотел отобразить их, используя тег <img>.Однако не все объекты имеют соответствующее изображение, и в этом случае я хотел бы выполнить REST-запрос к нашему серверу.

Я мог бы создать список файлов как часть процесса сборки, но я бы хотелпо возможности избегайте этого.

Я использую create-react-app, если это имеет значение (если я правильно понимаю, fs не работает в клиентских приложениях React).

РЕДАКТИРОВАТЬ: Полагаю, я должен был быть более точным в своем вопросе - я знаю, что JS на стороне клиента не может получить доступ к этой информации (кроме как через HTTP-запросы), я просто надеялся, что что-то сохранит (во время сборки) информацию о доступных файлахтаким образом, который доступен для Javascript на стороне клиента ... Может быть, Webpack или какое-либо расширение может сделать это?

Answer 1

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

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

  axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
            console.log(response)
        }).catch((error) => {
            console.log(error)
        })

Если изображение найдено, ответ будет 200, а если нет, то будет 404.

Редактировать: Кроме того, если файл изображения присутствует в папке активов внутри src,Вы можете сделать require, получить путь и выполнить вышеуказанный вызов с этим путем.

var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)

Answer 2

Прежде всего следует помнить об архитектуре клиент-сервер любого веб-приложения.Если вы используете create-react-app, вы обслуживаете свое приложение через webpack-dev-server.Поэтому вы должны подумать о том, как вы будете размещать свои файлы для производства.Наиболее распространенные способы:

• apache2 / nginx
• nodejs

, но существует множество других способов, зависящих от вашего стека.

С webpack-dev-server и в случае, если вы будете использовать apache2 / nginx, и если они будут настроены на прямой доступ к файлам, то можно делать прямые запросы к файлам.Например ваши файлы в публичном пути, так что

class MyImage extends React.Component {
   constructor (props) {
       super(props);

       this.state = {
           isExist: null
       }
   }

   componentDidMount() {
       fetch(MY_HOST + '/public/' + this.props.MY_IMAGE_NAME)
          .then(
              () => {
                  // request status is 200
                  this.setState({ isExist: true })
              },
              () => {
                  // request is failed
                  this.setState({ isExist: false })
              }
          );
   }

   render() {
       if (this.state.isExist === true) {
           return <img src={ MY_HOST + "/public/" + this.props.MY_IMAGE_NAME }/>
       }

       return <img src="/public/no-image.jpg"/>
   }
}