Images and SVGs ​

See content/public for the files that are copied to deployment without any sort of processing.

Images ​

The files from here are loaded into the site using vite imagetools.

The are the "source" files for the images used in the website.

The idea is that we store the "raw" files here.

The website pages will then load the images in various sizes and format to optimize loading time.

The images should expose the following attribute:

  • main - main image size
  • thumb - smaller image size
  • alt - alt text

Copy the raw image files inside content/static/images. Then update content/static/images.ts to add the definition for the new file. Make sure to import the file using ?responsive.

To use the images in the template

<script setup lang="ts">
import {images} from '@/images'
</script>
<template>
    <img
        :src="images['solution/as2-abstract'].main"
        :alt="images['solution/as2-abstract'].alt"
        />
</template>

To use the images as inline content

<template>
    <Figure src="solution/as2-abstract"/>
</template>

To use the image without extra processing

Some Markdown content

![Alt content](/static/images/graph.png)

SVGs ​

content/static/svg are the SVG files that are imported using vitepress.

Only the file that are used in the site are copied to the deployment directory.

Inside .vue files use something like this.

<img
    src="@/svg/logo/hp-partner.svg"
    alt="HP Partner"
    width="158"
    height="48"
/>