processImg() — react Function Reference

Architecture documentation for the processImg() function in ReactFlightServerConfigDOM.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ processImg() — react Function Reference

Dependency Diagram

graph TD
  c25cc9dd_9733_fd7f_1dc4_c0bd5ca3eb28["processImg()"]
  6a345571_3d83_3185_49d0_7a711dbada16["ReactFlightServerConfigDOM.js"]
  c25cc9dd_9733_fd7f_1dc4_c0bd5ca3eb28 -->|defined in| 6a345571_3d83_3185_49d0_7a711dbada16
  9360b73c_75e2_8c52_a5d5_4a59c8b52f88["getChildFormatContext()"]
  9360b73c_75e2_8c52_a5d5_4a59c8b52f88 -->|calls| c25cc9dd_9733_fd7f_1dc4_c0bd5ca3eb28
  d6d80e8f_983f_103d_5ad4_f6a8867e4516["getCrossOriginString()"]
  c25cc9dd_9733_fd7f_1dc4_c0bd5ca3eb28 -->|calls| d6d80e8f_983f_103d_5ad4_f6a8867e4516
  style c25cc9dd_9733_fd7f_1dc4_c0bd5ca3eb28 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js lines 77–130

function processImg(props: Object, formatContext: FormatContext): void {
  // This should mirror the logic of pushImg in ReactFizzConfigDOM.
  const pictureOrNoScriptTagInScope =
    formatContext & (PICTURE_SCOPE | NOSCRIPT_SCOPE);
  const {src, srcSet} = props;
  if (
    props.loading !== 'lazy' &&
    (src || srcSet) &&
    (typeof src === 'string' || src == null) &&
    (typeof srcSet === 'string' || srcSet == null) &&
    props.fetchPriority !== 'low' &&
    !pictureOrNoScriptTagInScope &&
    // We exclude data URIs in src and srcSet since these should not be preloaded
    !(
      typeof src === 'string' &&
      src[4] === ':' &&
      (src[0] === 'd' || src[0] === 'D') &&
      (src[1] === 'a' || src[1] === 'A') &&
      (src[2] === 't' || src[2] === 'T') &&
      (src[3] === 'a' || src[3] === 'A')
    ) &&
    !(
      typeof srcSet === 'string' &&
      srcSet[4] === ':' &&
      (srcSet[0] === 'd' || srcSet[0] === 'D') &&
      (srcSet[1] === 'a' || srcSet[1] === 'A') &&
      (srcSet[2] === 't' || srcSet[2] === 'T') &&
      (srcSet[3] === 'a' || srcSet[3] === 'A')
    )
  ) {
    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
    // resumableState.
    const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;

    const crossOrigin = getCrossOriginString(props.crossOrigin);

    preload(
      // The preload() API requires a href but if we have an imageSrcSet then that will take precedence.
      // We already remove the href anyway in both Fizz and Fiber due to a Safari bug so the empty string
      // will never actually appear in the DOM.
      src || '',
      'image',
      {
        imageSrcSet: srcSet,
        imageSizes: sizes,
        crossOrigin: crossOrigin,
        integrity: props.integrity,
        type: props.type,
        fetchPriority: props.fetchPriority,
        referrerPolicy: props.referrerPolicy,
      },
    );
  }
}