Skip to main content

Static Assets

Sometimes, your image doesn't come from API and you need to include it manually by adding the image to our repository.

Adding an asset to your service​

Our convention is to store all assets (including images) under the assets/ directory.

'- packages
   '- explore
      |- app-desktop/
      '- app-mobile/
         |- assets/
         |- pages/
         |- index.js
         '- package.json

Fixing the type definition​

Before importing the image in your component, you need to know that because we're using Typescript, by default it doesn't know that we can import them. To fix this issue, you need to add @traveloka/core/assets as reference type in next-env.d.ts.

 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="@traveloka/core/assets" />

After that, you can import any image type without error.

import { Image } from '@traveloka/web-components';

import imageFile from '../../assets/path/to/your/image.jpg';

function Page() {
  return <Image src={imageFile} />;
}