Adding Images

Here is demonstration using our custom image component. It is mostly designed to show you how to add images in the backend, so it refers to lines of code that will only appear when viewed via the back end.

First, prepare your images and save them in the appropriate format into the src/assets directory. Don’t forget to make them the appropriate size (e.g. 1800px or 2400px wide) and if possible save them in Webp format. - They will be converted to webp format regardless but if you save them to webp format it will also speed up the upload.

Next we need to import the general image component, being sure to keep empty lines before an after the following code:

Then we create a specific image reference being sure to give it a unique name:

Then we can use use the image component with our specific reference like so:

Now you should see the image above in the front-end.

To make sure we meet accessiblity requirements the alt tag is a included as necessary part of the image component. Also, if by chance you want the image to also link somewhere, just include link=”…” within the component as in the following example.

Here, to add another image we need to create another unique reference, eg:

And then:

Now in the front end you should see an image above that link also links to the homepage of this site.

You can also add images in SVG format like so.