One problem add Images in NextJS

[agarci1994]

I am trying to import two images in png, inside my API Routes to generate a passbook file. In local this works without problem, but when doing the deployment I get this error continuously

2020-11-20T12: 51: 57.832Z f15a3585-4191-45d9-9764-c2f8a1cea48d ERROR Uncaught exception {"errorType": "Error", "errorMessage": "ENOENT: no such file or directory, open './ images / icons / icon.png '"," code ":" ENOENT "," errno ": - 2," syscall ":" open "," path ":" ./ images / icons / icon.png "," stack ": [" Error: ENOENT: no such file or directory, open './images/icons/icon.png' "]}
[ERROR] [1605876717833] LAMBDA_RUNTIME Could not post the correct response from the driver. Http response code: 403.
RequestId: f15a3585-4191-45d9-9764-c2f8a1cea48d Error: Runtime exited with error: exit status 129
Runtime.ExitError

I have the images inside the Route folder ....

await template.images.add ("icon", "/icon.png"));
await template.images.add ("logo", "/logo.png"))

[tinovyatkin]

I don't get what is the problem - do you actually have the file ./images/icons/icon.png in place?

[agarci1994]

Yes, I have the file there. I have tried saving it to Public and routing it as "/logo.png". Also with "__dirname +" logo.png "", I also tried to grab the image from a cloudinary url

[agarci1994]

I'm trying to get some images to add to a template. The fetch request seems to freeze and give no response, neither catch () nor then () is executed. It seems to be frozen in production.

In local the code works perfectly and the date is executed as expected, but in production with Vercel it is frozen. What I can be doing wrong?.

return fetch(
        'https://firebasestorage.googleapis.com/v0/b/vilagos-tours-e0f99.appspot.com/o/images%2Flogo.png?alt=media&token=6735cf4c-e925-4af4-9a09-3a4c350ec3fc'
      )
        .then((res) => {
          console.log(res)
          return res.buffer()
        })
        .then(async (buffer) => {
          console.log(buffer)
          await template.images.add('icon', buffer);
          await template.images.add('logo', buffer);
        })
        .then(async () => {
          const pass = template.createPass();
          const buf = await pass.asBuffer();
          const string = buf.toString('base64');

          return string;
        }).catch(err => console.log(err))
    };

[gavinwolfe]

Any update to this? Running into same issue with icon.png not loading, but somehow logo.png loads

[live-alchemy]

I had to use path and import the images like so:

import * as path from "path";

  // Add Images
  const logoLight = path.join(
    process.cwd(),
    "api",
    "wallet",
    "img",
    "logo_light.png"
  );
  const logoThumb = path.join(
    process.cwd(),
    "api",
    "wallet",
    "img",
    "logo_thumb.png"
  );
  await template.images.add("logo", logoLight, "1x");
  await template.images.add("logo", logoThumb, "1x");

my images live in /api/wallet/img/logo_*.png

Maybe it helps someone!