Could we provide a fallback feature for component "Image"?

[rickyliu521]

There is case that we cannot get the response from src for component "Image", might be 404. once we have a new fallback feature props, we are able to set default value for it. In some kind of case, there is no node enviroment for running, we just render PDF by browser.

[tarabishy2020]

Would this work?

import React from "react";
import { ErrorBoundary as BaseErrorBoundary } from "react-error-boundary";
import { View, StyleSheet, Text } from "@react-pdf/renderer";

const ErrorFallback = ({ error }) => {
  return (
    <View style={styles.View}>
      <Text>Something went wrong:</Text>
      <Text>{error.message}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  View: {
    width: "100%",
    height: "100%",
    backgroundColor: "red",
    color: "white",
    fontSize: "4pt",
  },
});
export const ErrorBoundary = ({ children, FallbackComponent = null }) => {
  const Fallback = FallbackComponent ? FallbackComponent : ErrorFallback;
  return (
    <BaseErrorBoundary FallbackComponent={Fallback}>
      {children}
    </BaseErrorBoundary>
  );
};

use it like this

<ErrorBoundary >
        <ComponentThatCouldError/>
</ErrorBoundary >

[Alarid]

+1, need this as well. I think the PDF should be generated even if some image requests fail. At the moment, if a single image request results in 404 (or 503, because of the issue described in #1253) the PDF isn't generated, which is unfortunate

[jeetiss]

image fallback can be implemented with current components:

repl

closed as duplicate of #1559