image source issue

[kuyagic]

I found when I upload an image via notion , it can be rendered correctly , but I insert an image link which the image is outside notion. it can not be rendered correctly, its url is end with undefined.

[jdetle]

Fixed this in slug.tsx with:

 case "image":
              const { format = {} } = value;
              const {
                block_width,
                block_height,
                display_source,
                properties: image_properties,
                block_aspect_ratio
              } = format;
              const baseBlockWidth = 768;
              const roundFactor = Math.pow(10, 2);
              // calculate percentages
              const width = block_width
                ? `${Math.round(
                    (block_width / baseBlockWidth) * 100 * roundFactor
                  ) / roundFactor}%`
                : block_height || "100%";

              const useWrapper = block_aspect_ratio && !block_height;
		      const childStyle: CSSProperties = useWrapper
                ? {
                    width: "100%",
                    height: "100%",
                    border: "none",
                    position: "absolute",
                    top: 0
                  }
                : {
                    width,
                    border: "none",
                    height: block_height,
                    display: "block",
                    maxWidth: "100%"
                  };
              return (
                <img
                  key={!useWrapper ? id : undefined}
                  src={`/api/asset?assetUrl=${encodeURIComponent(
                    value.properties.source[0][0] as string
                  )}&blockId=${id}`}
                  style={childStyle}
                />
              );

[RachelHow]

Hi, how do we implement this in ReactJS? (not Typescript)