overleaf/services/web/frontend/js/features/binary-file/components/binary-file-image.js

import React from 'react'
import PropTypes from 'prop-types'
import { useEditorContext } from '../../../shared/context/editor-context'

export default function BinaryFileImage({ fileName, fileId, onLoad, onError }) {
  const { projectId } = useEditorContext({
    projectId: PropTypes.string.isRequired,
  })

  return (
    <img
      src={`/project/${projectId}/file/${fileId}`}
      onLoad={onLoad}
      onError={onError}
      onAbort={onError}
      alt={fileName}
    />
  )
}

BinaryFileImage.propTypes = {
  fileName: PropTypes.string.isRequired,
  fileId: PropTypes.string.isRequired,
  onLoad: PropTypes.func.isRequired,
  onError: PropTypes.func.isRequired,
}