Inconsistent use of lib-react-component's Media component

[srallen]

Package app-project

Feature or Issue Description
Media is built to use the thumbnail service which is in parallel with what we did on PFE. The reason is that some project have uploaded and/or are using massively sized images in their Markdown. There's already some image use on the project app not using the Media component. We should discuss why that's the case, i.e. does the Media component need some modifications to make it applicable to these use cases? Or if it can't be used, maybe make a note of that and independently use the thumbnail service in these cases.

[rogerhutchings]

In #1077, I didn't use Media because:

• the html it renders is a bit weird:

  <noscript>
    <div style="max-height:999px;max-width:999px">
      <img src="" alt="" height="100%" width="100%" style="flex:grow;object-fit:cover"/>
    </div>
  </noscript>
  

  This breaks without JS enabled.

• it caused a big teal placeholder to appear before the image rendered which was quite jarring.

If the goal is to make sure we use the thumbnail service, I'd probably find a HOC that passes in a function prop that can change an img's src more useful - it could then be used a few times to build up a srcSet, for example.

[eatyourgreens]

In PFE, the Thumbnail component includes a helper function to convert URLs. We use it to generate background images for styling, for example. Here's an example from the CroppedImage component, which renders an image cropped to the SVG viewbox, so can't render an img tag.

https://github.com/zooniverse/Panoptes-Front-End/blob/21cf42485929a62938112d5e2d4bca1a6702b00e/app/components/cropped-image.jsx#L26-L31

[eatyourgreens]

Related to this: Media generates invalid CSS height and width #1147, leading to layout bugs.