Using images

To use images in your Doctocat site:

1. Add an images folder in the root of your docs site

2. Add any images you'd like to use in the images folder

3. In the file you'd like to use an image in, import the image using a relative path:

import DemoImage from '../images/demo-image.png'

4. Then use that image name as the src value in an img tag:

<ImageContainer>
  <img src={DemoImage} alt="a description of your image"/>
</ImageContainer>

Make sure to use the alt attribute to describe your image for assistive technology, or use the Caption component

If you run into any problems with Gatsby building the site and not being able to find your image path try the following:

1. Double check that the path is correct
2. Try deleting the ./cache folder and rebuilding

Edit this page on GitHub

1 contributor

Last edited by colebemis on January 11, 2021