nuxt / nuxt/image

support async getImage function

Open
#963 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

I am using a custom provider which signs URLs using HMAC-SHA256. If async getImage is not supported, the image URL may not be generated correctly.

If we aim to support https://github.com/nuxt/image/issues/276 in the future, async getImage support will also be necessary.

import { subtle } from 'uncrypto';

async function sign(salt: string, target: string, secret: string, size = 32): Promise<string> {
  if (!salt || !secret) return '';

  const encoder = new TextEncoder();

  const secretEncoded = encoder.encode(secret);
  const key = await subtle.importKey(
    'raw',
    secretEncoded,
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign'],
  );

  const saltEncoded = encoder.encode(salt);
  const targetEncoded = encoder.encode(target);
  const data = new Uint8Array([...saltEncoded, ...targetEncoded]);

  const signature = await subtle.sign('HMAC', key, data);

  return arrayBufferToBase64Url(signature.slice(0, size));
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the getImage entry point and the custom-provider handling in the Nuxt image module. Trace how the URL is currently generated, then verify that an asynchronous provider using the HMAC-SHA256 example can produce the correct image URL before considering the issue complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.