Importing Media Content

“Media content” is a broad term that generally includes images, videos, documents and files that are displayed on your website. For Gatsby sites, you have multiple options for importing media content depending on the type:

Images, SVG, and PDFs

• Image graphics can be imported with Webpack and queried with GraphQL.
• Images can also be included from the static folder.
• SVG content can be embedded into JSX. Here’s a handy JSX converter.
• SVG can be included in img tags or CSS backgrounds. SVG Tips from CSS Tricks.
• For PDF files, we recommend embedding an image of the PDF with alternative text, and providing a link to download a tagged PDF.

Video assets

Like images, video assets present many options and requirements for cross-browser support. Learn about video embeds on the Gatsby docs page on working with video section.

Canvas and WebGL

The HTML5 <canvas> element provides a space for 2-dimensional drawing in a web environment. In Gatsby and React, it may help to include a library like react-konva or one of the comparison libraries to cut down on boilerplate and make drawing easier.

WebGL, on the other hand, creates a 3-dimensional space in a web environment using the <canvas> element. Libraries like Three.js are often used to enable WebGL experiences in React apps.

Using canvas and/or WebGL may require modifying your Webpack config. Do you have experience with making this work in your Gatsby site? Contribute to the docs by adding more details to this page.