How to use @sitecore-jss/sitecore-jss - 8 common examples

if (height) {
    imgStyles.height = typeof height !== 'number' ? Number(height) : height;
  }

  // react native styles/StyleSheets can be merged by passing them as an array to the native Image component
  newAttrs.style = style ? [imgStyles, style] : imgStyles;

  // in react-native, you need to "import" static assets via `require` statements
  // when the packager builds your app, it (presumably) statically analyzes your code, extracts
  // the assets that are `require`d into an array/map, then assigns them a numerical value.
  if (typeof src === 'number') {
    newAttrs.source = src;
  } else {
    // assume we have a "network image", i.e. something loaded via http(s)
    // update image URL for jss handler and image rendering params
    const uri = mediaApi.updateImageUrl(src, imageUrlParams);
    // for network images, the "source" prop is an object with at least "uri" value, e.g. { uri: 'http://aviato.com/myimg.jpg' }
    newAttrs.source = { uri };
  }

  return newAttrs;
};

private getImageAttrs(fieldAttrs: any, parsedAttrs: any, imageParams: any): any {
    const combinedAttrs = {
      ...fieldAttrs,
      ...parsedAttrs,
    };
    // tslint:disable-next-line:prefer-const
    let { src, srcSet, ...otherAttrs } = combinedAttrs;
    if (!src) {
      return null;
    }
    const newAttrs = {
      ...otherAttrs,
    };
    // update image URL for jss handler and image rendering params
    src = mediaApi.updateImageUrl(src, imageParams);
    if (srcSet) {
      // replace with HTML-formatted srcset, including updated image URLs
      newAttrs.srcSet = mediaApi.getSrcSet(src, srcSet, imageParams);
    } else {
      newAttrs.src = src;
    }
    return newAttrs;
  }

src: string;
    srcSet: any;
    otherAttrs: any[];
  },
  imageParams: any
) => {
  if (!src) {
    return null;
  }

  const newAttrs: any = {
    ...otherAttrs,
  };

  // update image URL for jss handler and image rendering params
  const resolvedSrc = mediaApi.updateImageUrl(src, imageParams);
  if (srcSet) {
    // replace with HTML-formatted srcset, including updated image URLs
    newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams);
  } else {
    newAttrs.src = resolvedSrc;
  }
  return newAttrs;
};

...fieldAttrs,
      ...parsedAttrs,
    };
    // tslint:disable-next-line:prefer-const
    let { src, srcSet, ...otherAttrs } = combinedAttrs;
    if (!src) {
      return null;
    }
    const newAttrs = {
      ...otherAttrs,
    };
    // update image URL for jss handler and image rendering params
    src = mediaApi.updateImageUrl(src, imageParams);
    if (srcSet) {
      // replace with HTML-formatted srcset, including updated image URLs
      newAttrs.srcSet = mediaApi.getSrcSet(src, srcSet, imageParams);
    } else {
      newAttrs.src = src;
    }
    return newAttrs;
  }

},
  imageParams: any
) => {
  if (!src) {
    return null;
  }

  const newAttrs: any = {
    ...otherAttrs,
  };

  // update image URL for jss handler and image rendering params
  const resolvedSrc = mediaApi.updateImageUrl(src, imageParams);
  if (srcSet) {
    // replace with HTML-formatted srcset, including updated image URLs
    newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams);
  } else {
    newAttrs.src = resolvedSrc;
  }
  return newAttrs;
};

...otherProps
}) => {
  // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers)
  if (field && !media) {
    media = field;
  }

  const dynamicMedia: any = media;

  if (!media || (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
    return null;
  }

  // we likely have an experience editor value, should be a string
  if (editable && dynamicMedia.editable) {
    const foundImg = mediaApi.findEditorImageTag(dynamicMedia.editable);
    if (!foundImg) {
      return getEditableWrapper(dynamicMedia.editable);
    }

    const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
    // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
    // We do not attempt to merge.
    const imgAttrs = getImageAttrs({ ...foundImgProps, ...otherProps } as any, imageParams);
    if (!imgAttrs) {
      return getEditableWrapper(dynamicMedia.editable);
    }

    const imgHtml = ReactDOMServer.renderToStaticMarkup(<img>);
    const editableMarkup = dynamicMedia.editable.replace(foundImg.imgTag, imgHtml);
    return getEditableWrapper(editableMarkup);
  }

private updateView() {
    const overrideAttrs = {
      ...this.getElementAttrs(),
      ...this.attrs,
    };
    const media = this.field;

    if (!media || (!media.editable && !media.value && !media.src)) {
      return;
    }

    let attrs: any = {};

    // we likely have an experience editor value, should be a string
    if (this.editable && media.editable) {
      const foundImg = mediaApi.findEditorImageTag(media.editable);
      if (!foundImg) {
        return this.renderInlineWrapper(media.editable);
      }
      attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
      if (!attrs) {
        return this.renderInlineWrapper(media.editable);
      }
      const tempImg: HTMLImageElement = this.renderer.createElement('img');
      Object.entries(attrs).forEach(([key, attrValue]: [string, any]) =>
        tempImg.setAttribute(key, attrValue)
      );
      const editableMarkup = media.editable.replace(foundImg.imgTag, tempImg.outerHTML);
      return this.renderInlineWrapper(editableMarkup);
    }

    // some wise-guy/gal is passing in a 'raw' image object value

export const getRouteData = (route) => {
  switch (route) {
    case '/': {
      return convertRouteToLayoutServiceFormat(routes.home);
    }
  }
};