fix image paths

Signed-off-by: Will Tsai <[email protected]>

docs/content/_index.md

@@ -10,7 +10,7 @@ no_list: true
 Welcome to the Radius documentation! Here you'll find everything you need to know about Radius, from getting started to advanced topics.
 
 {{% alert color="primary" %}}
-<img src="radius-logo.svg" alt="Radius logo" width="400px" /> <br /><br />
+<img src="./radius-logo.svg" alt="Radius logo" width="400px" /> <br /><br />
 Radius is a cloud native application platform.  It enables developers and IT operators to collaborate on delivering and managing cloud-native applications. With Radius, teams can easily understand their applications and how applications are running environments including dev, cloud, edge, and on-prem. Plus, teams can ensure their application infrastructure meets cost, operations, and security requirements. Open-source and multi-cloud, Radius is the cloud-native application platform for delivering and managing applications anywhere.
 
 [**Learn more**](https://radapp.io/)

docs/content/community/contributing/contributing-docs/index.md

@@ -11,7 +11,7 @@ The Radius docs are built on [Hugo](https://gohugo.io) with the [Docsy](https://
 
 Radius uses the [Diátaxis framework](https://diataxis.fr/) for its documentation:
 
-<img src="diataxis.png" alt="Diagram showing the diataxis framework" width=800px >
+<img src="./diataxis.png" alt="Diagram showing the diataxis framework" width=800px >
 
 Follow the guidance on this page to learn how to get started, how to contribute, and how to use the Diátaxis framework to create new docs.
 
@@ -356,17 +356,19 @@ Begin by placing images under `/daprdocs/static/images` with the naming conventi
 Then link to the image using:
 
 ```md
-<img src="/images/[image-filename]" width=1000 alt="Description of image">
+<img src="./images/[image-filename]" width=1000 alt="Description of image">
 ```
 
 >Don't forget to set the alt attribute to keep the docs readable for our visually impaired users.
 
+>Also note that the path to the image you wish to embed must begin with `./` to ensure the image renders properly when the webpage is built.
+
 #### Example
 
 This HTML will display the `radius-overview.png` image on the `overview.md` page:
 
 ```md
-<img src="/images/radius-overview.png" width=1000 alt="Overview diagram of Dapr and its building blocks">
+<img src="./images/radius-overview.png" width=1000 alt="Overview diagram of Dapr and its building blocks">
 ```
 
 ### Alerts

docs/content/concepts/application-graph/index.md

@@ -11,19 +11,19 @@ toc_hide: true
 
 Radius offers an [application resource]({{< ref "guides/author-apps/application" >}}) which teams can use to define and deploy their entire application, including all of the compute, relationships, and infrastructure that make up the application. Since the graph of relationships between deployed resources is much more descriptive than a basic list of resources, the Radius Application graph can automate complex deployment tasks and enable rich visualization experiences.
 
-<img src="application.png" alt="A diagram showing an application and all it's resources" width=400px >
+<img src="./application.png" alt="A diagram showing an application and all it's resources" width=400px >
 
 ## Graphs are better than lists
 
 Within an application deployed with Radius, developers can express both the resources (_containers, databases, message queues, etc._), as well as all the relationships between them. This forms the Radius Application graph. This graph is powerful because it allows Radius to understand the relationships between resources, simplifying the [deployment]({{< ref "/guides/deploy-apps" >}}) and [configuration]({{< ref "application" >}}) of your application. Plus, it allows you to visualize your application in a way that is more intuitive than a list of resources.
 
-<img src="list-to-graph.png" alt="A diagram showing the move from a set of infrastructure lists to a graph of resources" width=600px >
+<img src="./list-to-graph.png" alt="A diagram showing the move from a set of infrastructure lists to a graph of resources" width=600px >
 
 ## Self-documenting applications
 
 The Radius Application graph also allows your application to be self-documenting, where developers and operators can query and reason about the same application definition. Instead of multiple views of logs, infrastructure, and code, Radius provides a single source of truth for your application.
 
-<img src="dashboard.png" alt="A mockup of a dashboard UI showing an application, its resources, and its connections" width=700px >
+<img src="./dashboard.png" alt="A mockup of a dashboard UI showing an application, its resources, and its connections" width=700px >
 
 > **Note:** A Radius dashboard is still on the roadmap, but in the meantime you can use the [Radius API]({{< ref api-concept >}}) to build your own visual experiences today.
 

docs/content/concepts/architecture-concept/index.md

@@ -134,7 +134,7 @@ When listing applications using the `rad` CLI:
 3. UCP proxies the HTTP request to the `Applications.Core` resource provider.
 4. The `Applications.Core` resource provider handles the request and responds with the list of applications.
 
-<img src="flow-list-apps.png" alt="Diagram of the API flow described above" width="1000px" >
+<img src="./flow-list-apps.png" alt="Diagram of the API flow described above" width="1000px" >
 
 {{% /codetab %}}
 
@@ -148,7 +148,7 @@ When using Bicep to author and deploy Radius Applications:
   a. The `Bicep.Deployments` resource provider makes a request to UCP to Create/Update the resource.
   b. UCP routes the request to the appropriate resource provider to be handled.
 
-<img src="flow-deploy.png" alt="Diagram of the API flow described above" width="1000px" >
+<img src="./flow-deploy.png" alt="Diagram of the API flow described above" width="1000px" >
 
 {{% /codetab %}}
 
@@ -161,7 +161,7 @@ When using the `tf` CLI to deploy a Radius Application using Terraform:
   c. In the case of a Radius resource the Terraform provider makes a request the Radius API to Create/Update a resource.
   d. UCP routes the request to the appropriate resource provider to be handled.
 
-<img src="flow-terraform.png" alt="Diagram of the API flow described above" width="1000px" >
+<img src="./flow-terraform.png" alt="Diagram of the API flow described above" width="1000px" >
 
 {{% /codetab %}}
 

docs/content/concepts/environments-concept/index.md

@@ -14,7 +14,7 @@ Radius Environments are a prepared landing zone for applications. They contain a
 
 Environments provide a grouping structure for applications and the resources they share. For example, an org might choose to setup separate Radius Environments for staging and production. When appropriate, multiple applications can be deployed into the same environment.
 
-<img src="env-with-apps-example.png" alt="Diagram of multiple Radius Environments deployed to Azure. One environment contains 1 app, the other environment contains multiple apps." width="350px" />
+<img src="./env-with-apps-example.png" alt="Diagram of multiple Radius Environments deployed to Azure. One environment contains 1 app, the other environment contains multiple apps." width="350px" />
 
 ## Concerns that environments manage
 

docs/content/getting-started/index.md

@@ -14,7 +14,7 @@ This guide will show you how to quickly get started with Radius. You'll walk thr
 
 **Estimated time to complete: 10 min**
 
-<img src="diagram.png" alt="Diagram of the application and its resources" width=500px >
+<img src="./diagram.png" alt="Diagram of the application and its resources" width=500px >
 
 {{< alert title="🚀 Run in a <b>free</b> GitHub Codespace" color="primary" >}}
 The Radius getting-started guide can be [run **for free** in a GitHub Codespace](https://github.blog/changelog/2022-11-09-codespaces-for-free-and-pro-accounts/). Visit the following link to get started in seconds:

docs/content/guides/author-apps/application/overview/index.md

@@ -8,15 +8,15 @@ categories: "Overview"
 tags: ["applications"]
 ---
 
-<img src="application.png" alt="Diagram of an application" width=350px >
+<img src="./application.png" alt="Diagram of an application" width=350px >
 
 A Radius Application is the primary resource that brings all your "stuff" together. This can include services, dependencies, and relationships. Radius apps give you a single description and view into your entire application, and allow you to deploy and manage it easily.
 
 ## Add portability to your application
 
 Radius Applications are designed to be cloud and platform agnostic. This means that you can define your application once, and deploy it to any cloud or platform that Radius supports. This allows you to easily move your application between clouds, or even between cloud and on-premises environments. Developers can define their requirements and dependencies (_Redis, SQL, Dapr, etc._) and operators can define the [environments]({{< ref "guides/deploy-apps/environments/overview" >}}) and [Recipes]({{< ref "guides/recipes/overview" >}}) that bind those requirements to the appropriate cloud resources.
 
-<img src="portable-resources.png" alt="Diagram of portable resources binding to different clouds" width=600px >
+<img src="./portable-resources.png" alt="Diagram of portable resources binding to different clouds" width=600px >
 
 Learn more about portable resources in the [portable resources docs]({{< ref "guides/author-apps/portable-resources/overview" >}}) and [Dapr docs]({{< ref "guides/author-apps/dapr/overview" >}})
 
@@ -36,7 +36,7 @@ The [Kubernetes Metadata extension]({{< ref "guides/operations/kubernetes/kubern
 
 Radius Applications are more than just client-side configuration and automation, they also provide a server-side graph of your application. This graph can be queried and used to understand your application, and can be used to power other Radius features and custom tooling. Refer to the [API concept docs]({{< ref "api-concept" >}}) and [Postman How-To guide]({{< ref "guides/operations/control-plane/howto-postman" >}}) for more information on how to query the application graph.
 
-<img src="app-graph.png" alt="Diagram of the application graph" width=500px >
+<img src="./app-graph.png" alt="Diagram of the application graph" width=500px >
 
 ## Resource schema 
 

docs/content/guides/author-apps/containers/howto-volumes/index.md

@@ -41,7 +41,7 @@ The `samples/volumes` container will display the status and contents of the `/tm
    ```
 1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see a message warning that the directory `/tmpdir` does not exist:
 
-   <img src="screenshot-error.jpg" width=500px alt="Screeshot of container showing that the tmp directory does not exist">
+   <img src="./screenshot-error.jpg" width=500px alt="Screeshot of container showing that the tmp directory does not exist">
 
 ## Step 3: Add an ephemeral volume
 
@@ -65,10 +65,10 @@ Within the `container.volume` property, add a new volume named `temp` and config
 
 1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see the contents of `/tmpdir`, showing an empty directory.
 
-   <img src="screenshot-empty.jpg" width=500px alt="Screeshot of container showing that the tmp directory has no items">
+   <img src="./screenshot-empty.jpg" width=500px alt="Screeshot of container showing that the tmp directory has no items">
 1. Press the `Create file` button to generate a new file in the directory, such as `test.txt`:
 
-   <img src="screenshot.jpg" width=400px alt="Screeshot of container showing files being created">
+   <img src="./screenshot.jpg" width=400px alt="Screeshot of container showing files being created">
 1. Done! You've now learned how to mount an ephemeral volume
 
 ## Cleanup

docs/content/guides/author-apps/containers/overview/index.md

@@ -10,7 +10,7 @@ tags: ["containers"]
 
 A Radius container enables you to run a container workload as part of your application across different platforms and runtimes. Your container can be a frontend UI, a backend API, a database, or any other container you need to run as part of your app. Plus, with Radius Connections, you can easily connect your container to other resources in your application, such as databases, message queues, and more and automatically configure your container with identity, secrets, and other configuration.
 
-<img src="containers-splash.png" alt="Container graphic" width=300px >
+<img src="./containers-splash.png" alt="Container graphic" width=300px >
 
 > Adding a container and want to jump to the reference docs? Check out the [container resource schema]({{< ref "container-schema" >}}).
 

docs/content/guides/author-apps/dapr/overview/index.md

@@ -20,7 +20,7 @@ Follow the [Dapr installation instructions](https://docs.dapr.io/operations/host
 
 A [Dapr sidecar](https://docs.dapr.io/concepts/dapr-services/sidecar/) allows your services to interact with Dapr building blocks. It is required if your service leverages Dapr.
 
-<img src="dapr-sidecar.png" style="width:600px" alt="Diagram of the Dapr sidecar" /><br />
+<img src="./dapr-sidecar.png" style="width:600px" alt="Diagram of the Dapr sidecar" /><br />
 
 You can easily add the Dapr sidecar to your [Containers]({{< ref "guides/author-apps/containers" >}}) using a Dapr sidecar extension:
 
@@ -38,7 +38,7 @@ Your container can now interact with the sidecar using the Dapr [building block
 
 Dapr resources make it easy to model and configure [Dapr building block APIs](https://docs.dapr.io/developing-applications/building-blocks/). Simply specify the building block and the backing resource, and Radius will apply the accompanying Dapr component configuration.
 
-<img src="dapr-buildingblocks.png" style="width:1000px" alt="Diagram of all the Dapr building blocks" /><br />
+<img src="./dapr-buildingblocks.png" style="width:1000px" alt="Diagram of all the Dapr building blocks" /><br />
 
 Model your building blocks as resources:
 

docs/content/guides/author-apps/networking/howto-gateways/index.md

@@ -60,7 +60,7 @@ Building app.bicep...
 
 Visit the endpoint to interact with the demo Radius container:
 
-<img src="demo-screenshot.png" alt="Screenshot of te demo application" width="500px" >
+<img src="./demo-screenshot.png" alt="Screenshot of te demo application" width="500px" >
 
 ## Done
 

docs/content/guides/author-apps/networking/howto-service-networking/index.md

@@ -10,7 +10,7 @@ categories: "How-To"
 
 This guide will show you how two services can communicate with each other. In this example, we will have a frontend container service that communicates with a backend container service.
 
-<img src="overview.png" alt="Diagram of the frontend talking to the backend over HTTP port 80" width="400px" >
+<img src="./overview.png" alt="Diagram of the frontend talking to the backend over HTTP port 80" width="400px" >
 
 ## Prerequisites
 
@@ -64,7 +64,7 @@ Starting log stream...
 
 Visit [http://localhost:3000](http://localhost:3000) in your browser. You should see a connection to the backend container, along with the environment variables that have automatically been set on the frontend container:
 
-<img src="backend-connection.png" alt="Screenshot of the demo container showing the backend connections" width="600px" >
+<img src="./backend-connection.png" alt="Screenshot of the demo container showing the backend connections" width="600px" >
 
 ## Done
 

docs/content/guides/author-apps/networking/howto-tls/index.md

@@ -102,7 +102,7 @@ Building app.bicep...
 
 Once the deployment is complete you should see a public endpoint displayed at the end. Navigating to this public endpoint should show you your application that is accessed via HTTPS, assuming that you have a valid TLS certificate:
 
-<img src="https-app.png" alt="View TLS certificate" width="400px" />
+<img src="./https-app.png" alt="View TLS certificate" width="400px" />
 
 ## Done
 

docs/content/guides/author-apps/networking/overview/index.md

@@ -12,7 +12,7 @@ Radius networking resources allow you to model:
 - Communication between services
 - Communication between a user and a service
 
-<img src="networking.png" alt="Diagram of a gateway with traffic going to a frontend container, which in turn sends traffic to the basket and catalog containers" width="400px">
+<img src="./networking.png" alt="Diagram of a gateway with traffic going to a frontend container, which in turn sends traffic to the basket and catalog containers" width="400px">
 
 ## Service to service communication
 
@@ -26,7 +26,7 @@ Network connections are defined as strings containing:
 
 For example, a frontend container may need to connect to a basket container. The frontend container would define a connection to the basket container, with the scheme `http`, the target `basket`, and the port `3000`. The connection would look like this: `http://basket:3000`.
 
-<img src="network-connection.png" alt="Diagram showing the components of a network connection" width="400px">
+<img src="./network-connection.png" alt="Diagram showing the components of a network connection" width="400px">
 
 For more information on how to do service to service networking, visit the [service networking how-to guide]({{< ref howto-service-networking >}}):
 

docs/content/guides/author-apps/portable-resources/overview/index.md

@@ -12,7 +12,7 @@ tags: ["portability"]
 
 Portable resources provide **abstraction** and **portability** to Radius Applications. This allows development teams to depend on high level resource types and APIs, and let infra teams swap out the underlying resource and configuration.
 
-<img src="portable-resources.png" alt="Diagram of portable resources connecting to Azure CosmosDB, AWS MongoDB, and a MongoDB Docker container" width=700px />
+<img src="./portable-resources.png" alt="Diagram of portable resources connecting to Azure CosmosDB, AWS MongoDB, and a MongoDB Docker container" width=700px />
 
 ## Available resources
 

docs/content/guides/operations/control-plane/howto-postman/index.md

@@ -103,11 +103,11 @@ Next, you'll need to get the control plane API endpoint and use Postman to inter
     <your-cluster-control-plane>/apis/api.ucp.dev/v1alpha3/planes/radius/local/resourcegroups?api-version=2023-10-01-preview
     ```
 
-    <img src="postman-url.png" width=900px alt="Screenshot of Postman with filled out URL" >
+    <img src="./postman-url.png" width=900px alt="Screenshot of Postman with filled out URL" >
 
 1. Open the `Authorization` tab and select `Bearer Token` from the `Type` dropdown. Paste the token you generated in step 2 into the `Token` field:
 
-   <img src="postman-auth.png" width=900px alt="Screenshot of Postman with filled out auth token" >
+   <img src="./postman-auth.png" width=900px alt="Screenshot of Postman with filled out auth token" >
 
 1. Click the `Send` button to send the request. You will now see your resource groups:
 

docs/content/guides/operations/control-plane/metrics/grafana/index.md

@@ -18,17 +18,17 @@ There are two example dashboards that you can import into Grafana to quickly get
 
 The [radius-overview-dashboard.json](https://raw.githubusercontent.com/radius-project/radius/main/grafana/radius-overview-dashboard.json) template shows Radius and Deployment Engine statuses, including runtime, and server-side health:
 
-<img src="radius-overview-1.png" alt="1st screenshot of the Radius Overview Dashboard" width=1200><br/>
+<img src="./radius-overview-1.png" alt="1st screenshot of the Radius Overview Dashboard" width=1200><br/>
 
-<img src="radius-overview-2.png" alt="2nd screenshot of the Radius Overview Dashboard" width=1200><br/>
+<img src="./radius-overview-2.png" alt="2nd screenshot of the Radius Overview Dashboard" width=1200><br/>
 
 ### Resource provider overview
 
 The [radius-resource-provider-dashboard.json](https://raw.githubusercontent.com/radius-project/radius/main/grafana/radius-resource-provider-dashboard.json) template shows Radius Resource Provider status, including runtime, server-side, and operations health:
 
-<img src="radius-resource-provider-1.png" alt="1st screenshot of the Radius Resource Provider Dashboard" width=1200><br/>
+<img src="./radius-resource-provider-1.png" alt="1st screenshot of the Radius Resource Provider Dashboard" width=1200><br/>
 
-<img src="radius-resource-provider-2.png" alt="2nd screenshot of the Radius Resource Provider Dashboard" width=1200><br/>
+<img src="./radius-resource-provider-2.png" alt="2nd screenshot of the Radius Resource Provider Dashboard" width=1200><br/>
 
 ## Setup on Kubernetes
 

docs/content/guides/operations/control-plane/traces/jaeger/index.md

@@ -60,7 +60,7 @@ The following steps show you how to configure the Radius control plane to send d
 
 2. In your browser, go to [http://localhost:16686](http://localhost:16686) to see the Jaeger UI:
 
-   <img src="jaeger_ui.png" alt="" style="width:100%" >
+   <img src="./jaeger_ui.png" alt="" style="width:100%" >
 
 ## References
 

docs/content/guides/operations/control-plane/traces/zipkin/index.md

@@ -54,7 +54,7 @@ The following steps show you how to configure the [Radius control plane]({{< ref
 
 2. In your browser, go to [http://localhost:9411](http://localhost:9411) to see the Zipkin UI and run a query:
 
-   <img src="zipkin_ui.png" alt="" style="width:100%" >
+   <img src="./zipkin_ui.png" alt="" style="width:100%" >
 
 3. Done! You can now use the Zipkin UI to view tracing data for your Radius control plane.