Question

是否可以检查/public/目录中是否存在文件？

我有一组与某些物体相对应的图像。如果可用，我想使用<img>标记显示它们。但是并非所有对象都有相应的图像，在这种情况下，我想对我们的服务器执行REST请求。

我可以在构建过程中创建一个文件列表，但如果可能的话我想避免这样做。

我正在使用create-react-app如果重要（如果我理解正确fs在客户端React应用中无效）。

编辑：我想在我的问题中我应该更准确 - 我知道客户端JS无法访问此信息（除了通过HTTP请求），我只是希望有些东西以客户端Javascript可访问的方式保存有关可用文件的信息（在构建期间）...也许Webpack或某些扩展可以做到这一点？

Answer 1

您可以通过设置相应图像文件夹的相对路径，使用您的axios执行此操作。我这样做是为了获得$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) { $(this).tab('show'); e.stopPropagation(); });。您可以针对json file尝试相同的方法，您可以参考these示例

注意：如果您已经将baseurl的axios实例设置为不同域中的服务器，则必须使用部署Web应用程序的静态文件服务器的完整路径。

image file

如果找到图像，则响应为200，如果不是，则为404。

编辑：此外，如果图像文件存在于src内的资源文件夹中，您可以执行axios.get('http://localhost:3000/assets/samplepic.png').then((response) => { console.log(response) }).catch((error) => { console.log(error) })，获取路径并使用该路径执行上述调用。

require

Answer 2

首先，您应该记住任何Web应用程序的客户端 - 服务器架构。如果您使用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"/>
   }
}

如何检查是否在React中从public / dir添加了资产？

2 个答案: