Update syntax image examples to use images path (#1162)

* Update docs to use `images` path

As a convention our images are stored in a `images` directories, but our syntax instructions use `img` in the example image paths. This caused confusion for one developer so far, so I think it's worth updating our guide.

* Update image locations

* fix build errors and hints

---------

Co-authored-by: Colleen McGinnis <[email protected]>

Author: kilfoyle

docs/development/index.md

@@ -5,6 +5,3 @@ navigation_title: Development
 # Development Guide
 
 TODO write development documentation here
-
-
-![Image outside of scope](../images/great-drawing-of-new-structure.png)

docs/syntax/applies.md

@@ -67,24 +67,24 @@ Both are equivalent, note `all` just means we won't be rendering the version por
 
 ## Structured model
 
-![Applies To Model](img/applies.png)
+![Applies To Model](images/applies.png)
 
 The above model is projected to the following structured yaml.
 
 ```yaml
 ---
 applies_to:
-  stack: 
+  stack:
   deployment:
-    eck: 
-    ess: 
-    ece: 
-    self: 
+    eck:
+    ess:
+    ece:
+    self:
   serverless:
-    security: 
-    elasticsearch: 
-    observability: 
-  product: 
+    security:
+    elasticsearch:
+    observability:
+  product:
 ---
 ```
 This allows you to annotate various facets as defined in [](../migration/versioning.md)
@@ -128,7 +128,7 @@ serverless:
 product: coming 9.5, discontinued 9.7
 ```
 
-A header may be followed by an `{applies_to}` directive which will contextualize the applicability 
+A header may be followed by an `{applies_to}` directive which will contextualize the applicability
 of the section further.
 
 :::{note}
@@ -154,7 +154,7 @@ stack: ga 9.1
 
 This will allow the yaml inside the `{applies-to}` directive to be fully highlighted.
 
-## Inline Applies To 
+## Inline Applies To
 
 Inline applies to can be placed anywhere using the following syntax
 

docs/syntax/images.md

@@ -9,21 +9,21 @@ Images can be referenced from the top-level `_static` dir or a local image dir.
 ## Block-level images
 
 ```markdown
-![APM](img/apm.png)
+![APM](images/apm.png)
 ```
 
-![APM](img/apm.png)
+![APM](images/apm.png)
 
 Or, use the `image` directive.
 
 ```markdown
-:::{image} img/observability.png
+:::{image} images/observability.png
 :alt: Elasticsearch
 :width: 250px
 :::
 ```
 
-:::{image} img/observability.png
+:::{image} images/observability.png
 :alt: Elasticsearch
 :width: 250px
 :::
@@ -33,36 +33,36 @@ Or, use the `image` directive.
 Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive.
 
 ```markdown
-:::{image} img/apm.png
+:::{image} images/apm.png
 :screenshot:
 :::
 ```
 
-:::{image} img/apm.png
+:::{image} images/apm.png
 :screenshot:
 :::
 
 ## Inline images
 
 ```markdown
-Here is the same image used inline ![Elasticsearch](img/observability.png "elasticsearch =50%x50%")
+Here is the same image used inline ![Elasticsearch](images/observability.png "elasticsearch =50%x50%")
 ```
 
-Here is the same image used inline ![Elasticsearch](img/observability.png "elasticsearch =50%x50%")
+Here is the same image used inline ![Elasticsearch](images/observability.png "elasticsearch =50%x50%")
 
 
 ### Inline image titles
 
 Titles are optional making this the minimal syntax required
 
 ```markdown
-![Elasticsearch](img/observability.png)
+![Elasticsearch](images/observability.png)
 ```
 
 Including a title can be done by supplying it as an optional argument.
 
 ```markdown
-![Elasticsearch](img/observability.png "elasticsearch")
+![Elasticsearch](images/observability.png "elasticsearch")
 ```
 
 ### Inline image sizing
@@ -92,16 +92,16 @@ If `H` is omitted `W` is used as the height as well.
 ### SVG 
 
 ```markdown
-![Elasticsearch](img/alerts.svg)
+![Elasticsearch](images/alerts.svg)
 ```
-![Elasticsearch](img/alerts.svg)
+![Elasticsearch](images/alerts.svg)
 
 ### GIF
 
 ```markdown
-![Elasticsearch](img/timeslider.gif)
+![Elasticsearch](images/timeslider.gif)
 ```
-![Elasticsearch](img/timeslider.gif)
+![Elasticsearch](images/timeslider.gif)
 
 
 ## Asciidoc syntax
@@ -113,4 +113,4 @@ image::images/metrics-alert-filters-and-group.png[Metric threshold filter and gr
 
 ```asciidoc
 image::images/synthetics-get-started-projects.png[]
-```
+```