Fix broken image links in API Keys doc

[Thilina2468]

Purpose

Resolves #11557. Images on the API Keys documentation page (https://apim.docs.wso2.com/en/latest/includes/design/generate-api-key/) are broken.

Goals

Restore the images on that page without breaking the same content when it is transcluded into secure-apis-using-api-keys.md.

Approach

en/docs/includes/design/generate-api-key.md is built as a standalone mkdocs page (only wip/* is excluded via the exclude plugin in en/mkdocs.yml), in addition to being transcluded into secure-apis-using-api-keys.md via {!includes/design/generate-api-key.md!}. The file hardcoded image links as ../../../../assets/img/... (4 levels up), which is only correct for the transcluded context (built 4 levels deep) and breaks on the standalone page (built 3 levels deep).

Replaced all 8 occurrences with the {{base_path}}/assets/img/... convention already used throughout the rest of the docs (e.g. en/docs/api-gateway/message-tracing.md), which resolves correctly regardless of nesting depth.

User stories

N/A

Release note

Fixed broken image links on the API Keys documentation page.

Documentation

This PR is the documentation fix itself.

Training

N/A

Certification

N/A - no impact on certification exams.

Marketing

N/A

Automation tests

• Unit tests: N/A (documentation content change)
• Integration tests: N/A

Security checks

• Followed secure coding standards: yes
• Ran FindSecurityBugs plugin and verified report: N/A (markdown-only change, no code)
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets: yes

Samples

N/A

Related PRs

Companion PR targeting the 4.7.0 branch (same fix, since #11557 reports version 4.7.0).

Migrations (if applicable)

N/A

Test environment

Verified all 8 referenced image files exist at en/docs/assets/img/learn/api-keys/ (and en/docs/assets/img/learn/subscribe-to-api.png) and that the {{base_path}} pattern is the established convention elsewhere in this repo.

Learning

Traced the mkdocs build config (en/mkdocs.yml) to confirm the includes/ directory is not excluded from the build, which is why this file is served as two separate pages at different depths.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 98c9d339-0e17-4d87-af53-6222d8821ac0

📥 Commits

Reviewing files that changed from the base of the PR and between acd83ed and 2cd1cb2.

📒 Files selected for processing (1)

• en/docs/includes/design/generate-api-key.md

---

📝 Walkthrough

Updated API Keys documentation image links to use {{base_path}} asset URLs, ensuring screenshots render correctly both standalone and when transcluded. Added screenshots covering API key association workflows.

Walkthrough

Updated the API key documentation to use {{base_path}}-relative URLs for screenshots. The subscription-enabled workflow now includes additional screenshots showing API key association from the generation flow and the subscribed application’s API Keys page. Associated step instructions were adjusted to match the expanded image sequence.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: fixing broken API Keys documentation image links.
Description check	✅ Passed	The description follows the required template and fills the key sections with relevant details for this documentation fix.
Linked Issues check	✅ Passed	The PR directly addresses issue #11557 by fixing the broken image links on the API Keys doc page.
Out of Scope Changes check	✅ Passed	The changes stay within scope, limited to documentation image path fixes and related screenshots for the same page.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}