Cannot load image

Google AI Studio
,
1

Hi everyone,

I am currently using Google AI Studio to build a React landing page. I’ve hit a persistent roadblock that the AI seems unable to resolve, despite multiple specific prompts.

The Context: I have a standard React + TypeScript setup. I am trying to import a PNG image into X component.

The Problem: No matter what I do, the environment throws the following error: Cannot find module '../assets/images/somePicture.png' or its corresponding type declarations. (TS2307)

The AI’s Failure Loop: I have explicitly asked the model to fix this issue using standard best practices, but it keeps failing or hallucinating the solution. Here is what we have tried:

  1. File Extension: I corrected the AI multiple times that the file is .png, not .jpg. It acknowledges this but often reverts to the wrong extension or fails to update the path correctly.

  2. Type Declarations: I prompted the AI to create a declarations.d.ts (or vite-env.d.ts) file and add declare module '*.png';. The AI claims to have done this, but the error persists, suggesting it’s not actually updating the file structure or the configuration is being ignored.

  3. Path Resolution: I asked it to fix relative paths (.././assets vs ../assets). It changes the string, but the build still fails.

  4. Brute Force: I even asked it to switch to require or move the file to the public folder to bypass the TS check. The model struggles to execute this file move or generates code that is incompatible with the current Vite configuration.

My Question: Has anyone else experienced the model being unable to “see” or correctly manipulate asset files in the project tree? It feels like the AI loses context of the file structure or lacks the permission/capability to actually enforce the d.ts fix it suggests.

Is there a specific prompt or workflow to force Google AI Studio to recognize static assets properly in a TypeScript environment?

Any advice would be appreciated.