JDoodle.ai docs

Appearance

How to Upload an Image on JDoodle.ai ​

With JDoodle.ai, you can now upload and integrate images into your project to enhance visual presentation and user experience.

In JDoodle.ai, you can upload a single image to customize various areas, such as:

  • Full-Width Banner: A header image to enhance the landing page.
  • Profile Picture: A personal avatar to make your account uniquely yours.
  • App Asset: A logo, background, or visual element for your app’s interface.
  • Content Embed: An image to illustrate documentation or shared projects.

Step-by-Step: Uploading an Image via Prompt ​

1. Head to the Prompt Box ​

Open jdoodle.ai and go to the prompt box.

2. Upload Your Image ​

Click the 📎 (attachment icon) in the left corner of the prompt box to add your image file.

Formats supported:

  • JPG / JPEG
  • PNG
  • SVG
  • GIF
  • WEBP

Max file size:

  • SVG → up to 300 KB
  • All other formats → up to 5 MB

3. Add Your Instruction ​

Once you add your image, type a clear prompt in the chat box to specify where the image should go. Be specific to get the best results.

For example:

  • Use this image as a full-width banner at the top.
  • Add this image below the “Features” section, centered and medium-sized.

4. Run the Prompt ​

Hit Enter, and your image will be uploaded and placed according to your prompt.

Example prompts:

  • Use this image as the hero background.
  • Place this image above the “Pricing” section, aligned to the left.
  • Insert this image below the intro text, centered.

5. Review the Result ​

Once the prompt is processed, your image will appear in your project, profile, or app’s interface — depending on your instruction.

If the outcome isn’t quite right, just re-upload the image with a more specific prompt.

Example:

Move this image to the top-right corner of the banner.

6. Repeat as Needed ​

To add another image:

Upload it in the next prompt and describe where it should go.

Upload: Place this image in the footer section, small size.

To replace an existing image:

If you're not happy with the output of the uploaded image, you can replace it.

Upload: Replace the banner image at the top with this one.

Notes & Tips ​

  • Craft a Precise Prompt:
    Be clear about placement and style.
    Better: “Use this image as a centered, full-width banner”
    Avoid: “Add this image.”

  • Optimize Your Image:

    • Banners: use high-resolution (e.g., 1200×400 px)
    • Profile: use 1:1 ratio (e.g., 200×200 px)

  • Compress the File Size:
    Use tools like TinyPNG or Squoosh to reduce file size without quality loss.

  • Match Your Vibe:
    Choose an image that reflects your project’s tone — sleek for professional apps, playful for creative ones.

Troubleshooting Tips ​

  • Image misplaced:
    Re-upload the image and refine your prompt.

  • Build issues:
    Click on "Fix Errors" when prompted — JDoodle will auto-resolve most issues.

  • No image showing:
    If you get confirmation but nothing appears:

    • Try re-uploading with a clearer prompt
    • Clear your browser’s cache
    • Try a different browser

Need Help? ​

If your image doesn’t show up or still appears in the wrong spot after trying everything, reach out to:

[email protected] — we’ll help you sort it in no time!

FAQs ​

1. What are the supported image formats?

JDoodle.ai supports JPG/JPEG, PNG, SVG, GIF, WEBP formats

2. What is the maximum file size of the image allowed?

SVG → up to 300 KB All other formats → up to 5 MB

3. Can I upload multiple images at the same time?

No. You can only upload one image per prompt at the moment.

4. How to replace or delete an existing image?

You can use a new upload prompt like : “Replace the [section] image with this one.” “Remove the image from [section].”

5. Can I resize or reposition an image after uploading?

Yes, you can resize or reposition the image after uploading by using the element edit option.

6. Why isn’t my image appearing?

If your image is not appearing, try the following : Refine the prompt and reupload the image. Try clearing browser cache Try using a different browser.