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

通过将相对路径设置到相应的images文件夹,可以使用axios实现这一点。我这样做是为了得到一个 json file . 你可以用同样的方法来解决问题 image file ,您可以参考 these 示例

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

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

如果找到图像,响应将为200,如果没有,响应将为404。

编辑:另外,如果图像文件存在于src中的assets文件夹中,您可以执行 require

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

首先,您应该记住任何web应用程序的客户机-服务器体系结构。如果您正在使用 create-react-app 您正在通过 webpack-dev-server . 因此,您应该考虑如何为生产托管文件。最常见的方法是:

• 节点

但是有很多其他的方法取决于你的堆栈。

Web包开发服务器 如果您将使用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"/>
   }
}