# Not able to render images

**URL:** <https://discourse.gohugo.io/t/not-able-to-render-images/42948>\
**Category:** support\
**Created:** [February 13, 2023, 3:39pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948 "2023-02-13T15:39:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Soham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/soham/32/18788_2.png) [@Soham](https://discourse.gohugo.io/u/Soham)\
**Post date:** [February 13, 2023, 3:39pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948/1 "2023-02-13T15:39:22Z")

</div>

Hi all,

I’m not able to render images to my markdown files. I have an image inside static folder and I’m trying to render it using but it wont work. Please help!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/6/8/687fe11a63c123b82ca7f7dfdb6dc988126a3482.png)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 13, 2023, 3:59pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948/2 "2023-02-13T15:59:20Z")

</div>

You are more likely to receive an accurate and timely response if you post a link to the public repository for your project.

See [https://discourse.gohugo.io/t/requesting-help/9132](https://discourse.gohugo.io/t/requesting-help/9132).

> Let us see your code
> 
> Include a **link to the source code repository** of your project, because we really need the _context_ of seeing your templates and partials to be able to help you. It is trivial to do a quick `git clone` on your repo, then run `hugo server` in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.
> 
> If you can’t share your repository for whatever reason, consider creating a dummy repo that you _can_ share, which reproduces the problem you’re experiencing.

---

<div class="post-metadata">

**Author:** ![Soham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/soham/32/18788_2.png) [@Soham](https://discourse.gohugo.io/u/Soham)\
**Post date:** [February 13, 2023, 4:08pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948/3 "2023-02-13T16:08:19Z")

</div>

Please find my repo here: [GitHub - sdthaker/blogpost](https://github.com/sdthaker/blogpost.git) @jmooring

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 13, 2023, 4:21pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948/4 "2023-02-13T16:21:33Z")

</div>

You are serving your site from a subdirectory:

```auto
baseURL: "https://sdthaker.github.io/sohamwhocodes/"

```

A host-relative URL like `/foo.jpg` resolves to `https://sdthaker.github.io/foo.jpg`.

#### Option 1 - Change your markdown

```plaintext
![alt text](/sohamwhocodes/protest.jpg)

```

This works, but I wouldn’t do it:

- It is fragile (everything breaks if you change your baseURL)
- The markdown isn’t portable

#### Option 2 - Use image and link render hooks to resolve image and link destinations
  

> **layouts/\_default/\_markup/render-image.html**
>
> ```plaintext
> {{- /*
> Internal destinations are resolved in this order:
> 
> 1. Page resource
> 2. Global resource
> 
> External destinations are also captured as resources to determine width and
> height attributes. The rendered URLs for these resources are relative to the
> generated site.
> 
> Global resources must be placed within the assets directory. If these resources
> are located in the static directory, and you are unable or unwilling to move
> them, you must mount the static directory to the assets directory by including
> both of these entries in the site configuration:
> 
> [[module.mounts]]
> source = 'assets'
> target = 'assets'
> 
> [[module.mounts]]
> source = 'static'
> target = 'assets'
> 
> By default, if the destination cannot be resolved, it will be passed through
> without modification. To emit a warning or error, set the error level in the
> site configuration:
> 
> [params.render_hooks.image]
> errorLevel = 'error' # ignore (default), warning, or error
> 
> The example above will throw an error and fail the build if the destination
> cannot be resolved.
> 
> This render hook may be unable to resolve destinations created with the ref and
> relref shortcodes. Unless the error level is set to ignore, you should not use
> either of these shortcodes.
> */}}
> 
> {{- /* Action when unable to resolve destination: ignore, warning, or error. */}}
> {{- $errorLevel := or site.Params.render_hooks.image.errorLevel "ignore" | lower }}
> 
> {{- /* Validate action. */}}
> {{- if not (in (slice "ignore" "warning" "error") $errorLevel) }}
> {{- errorf "%q is an invalid action when unable to resolve destination" $errorLevel }}
> {{- end }}
> 
> {{- /* Determine content path for warning and error messages. */}}
> {{- $contentPath := "" }}
> {{- with .Page.File }}
> {{- $contentPath = .Path }}
> {{- else }}
> {{- $contentPath = .Path }}
> {{- end }}
> 
> {{- /* Parse destination. */}}
> {{- $u := urls.Parse .Destination }}
> 
> {{- /* Set common message. */}}
> {{- $msg := printf "Unable to resolve image destination %q in %s" $u.String $contentPath }}
> 
> {{- /* Get image resource. */}}
> {{- $r := "" }}
> {{- if $u.IsAbs }}
> {{- with resources.GetRemote $u.String }}
> {{- with .Err }}
> {{- if eq $errorLevel "warning" }}
> {{- warnf "%s. See %s" . $contentPath }}
> {{- else if eq $errorLevel "error" }}
> {{- errorf "%s. See %s" . $contentPath }}
> {{- end }}
> {{- else }}
> {{- /* Destination is external. */}}
> {{- $r = . }}
> {{- end }}
> {{- else }}
> {{- if eq $errorLevel "warning" }}
> {{- warnf $msg }}
> {{- else if eq $errorLevel "error" }}
> {{- errorf $msg }}
> {{- end }}
> {{- end }}
> {{- else }}
> {{- with .Page.Resources.Get (strings.TrimPrefix "./" $u.Path) }}
> {{- /* Destination is a page resource. */}}
> {{- $r = . }}
> {{- else }}
> {{- with resources.Get $u.Path }}
> {{- /* Destination is a global resource. */}}
> {{- $r = . }}
> {{- else }}
> {{- if eq $errorLevel "warning" }}
> {{- warnf $msg }}
> {{- else if eq $errorLevel "error" }}
> {{- errorf $msg }}
> {{- end }}
> {{- end }}
> {{- end }}
> {{- end }}
> 
> {{- /* Initialize attributes. */}}
> {{- $attrs := merge .Attributes (dict "alt" .PlainText "title" .Title "src" $u.String) }}
> 
> {{- /* Merge attributes from resource. */}}
> {{- with $r }}
> {{- $attrs = merge $attrs (dict "src" .RelPermalink) }}
> {{- if not (eq .MediaType.SubType "svg") }}
> {{- $attrs = merge $attrs (dict "height" (string .Height) "width" (string .Width)) }}
> {{- end }}
> {{- end }}
> 
> {{- /* Render image element. */ -}}
> <img
> {{- range $k, $v := $attrs }}
> {{- if or $v (eq $k "alt") }}
> {{- printf " %s=%q" $k $v | safeHTMLAttr }}
> {{- end }}
> {{- end -}}
> >
> {{- /**/ -}}
> 
> ```

  

> **layouts/\_default/\_markup/render-link.html**
>
> ```plaintext
> {{- /*
> Internal destinations are resolved in this order:
> 
> 1. Content page
> 2. Page resource (example: PDF file)
> 3. Global resource (example: PDF file)
> 
> External destinations are passed through without modification.
> 
> Global resources must be placed within the assets directory. If these resources
> are located in the static directory, and you are unable or unwilling to move
> them, you must mount the static directory to the assets directory by including
> both of these entries in the site configuration:
> 
> [[module.mounts]]
> source = 'assets'
> target = 'assets'
> 
> [[module.mounts]]
> source = 'static'
> target = 'assets'
> 
> By default, if the destination cannot be resolved, it will be passed through
> without modification. To emit a warning or error, set the error level in the
> site configuration:
> 
> [params.render_hooks.link]
> errorLevel = 'error' # ignore (default), warning, or error
> 
> The example above will throw an error and fail the build if the destination
> cannot be resolved.
> 
> This render hook may be unable to resolve destinations created with the ref and
> relref shortcodes. Unless the error level is set to ignore, you should not use
> either of these shortcodes.
> */}}
> 
> {{- /* Action when unable to resolve destination: ignore, warning, or error. */}}
> {{- $errorLevel := or site.Params.render_hooks.link.errorLevel "ignore" | lower }}
> 
> {{- /* Validate action. */}}
> {{- if not (in (slice "ignore" "warning" "error") $errorLevel) }}
> {{- errorf "%q is an invalid action when unable to resolve destination" $errorLevel }}
> {{- end }}
> 
> {{- /* Determine content path for warning and error messages. */}}
> {{- $contentPath := "" }}
> {{- with .Page.File }}
> {{- $contentPath = .Path }}
> {{- else }}
> {{- $contentPath = .Path }}
> {{- end }}
> 
> {{- /* Parse destination. */}}
> {{- $u := urls.Parse .Destination }}
> 
> {{- /* Set common message. */}}
> {{- $msg := printf "Unable to resolve link destination %q in %s" $u.String $contentPath }}
> 
> {{- /* Set attributes for anchor element. */}}
> {{- $attrs := dict "href" $u.String }}
> {{- if $u.IsAbs }}
> {{- /* Destination is external. */}}
> {{- $attrs = merge $attrs (dict "rel" "external") }}
> {{- else }}
> {{- with $u.Path }}
> {{- with $.Page.GetPage . }}
> {{- /* Destination is a page. */}}
> {{- $href := .RelPermalink }}
> {{- with $u.RawQuery }}
> {{- $href = printf "%s?%s" $href $u.RawQuery }}
> {{- end }}
> {{- with $u.Fragment }}
> {{- $href = printf "%s#%s" $href $u.Fragment }}
> {{- end }}
> {{- $attrs = dict "href" $href }}
> {{- else }}
> {{- with $.Page.Resources.GetMatch $u.Path }}
> {{- /* Destination is a page resource; drop query and fragment. */}}
> {{- $attrs = dict "href" .RelPermalink }}
> {{- else }}
> {{- with resources.Get $u.Path }}
> {{- /* Destination is a global resource; drop query and fragment. */}}
> {{- $attrs = dict "href" .RelPermalink }}
> {{- else }}
> {{- if eq $errorLevel "warning" }}
> {{- warnf $msg }}
> {{- else if eq $errorLevel "error" }}
> {{- errorf $msg }}
> {{- end }}
> {{- end }}
> {{- end }}
> {{- end }}
> {{- else }}
> {{- with $u.Fragment }}
> {{- /* Destination is on the same page; prepend relative permalink. */}}
> {{- $attrs = dict "href" (printf "%s#%s" $.Page.RelPermalink .) }}
> {{- else }}
> {{- if eq $errorLevel "warning" }}
> {{- warnf $msg }}
> {{- else if eq $errorLevel "error" }}
> {{- errorf $msg }}
> {{- end }}
> {{- end }}
> {{- end }}
> {{- end }}
> {{- with .Title }}
> {{- $attrs = merge $attrs (dict "title" .) }}
> {{- end -}}
> 
> {{- /* Render anchor element. */ -}}
> <a
> {{- range $k, $v := $attrs }}
> {{- printf " %s=%q" $k $v | safeHTMLAttr }}
> {{- end -}}
> >{{ .Text | safeHTML }}</a>
> {{- /**/ -}}
> 
> ```

  

Read the comments at the beginning of each file, specifically about image locations:

```plaintext
Global resources must be placed within the assets directory. If these resources
are located in the static directory, and you are unable or unwilling to move
them, you must mount the static directory to the assets directory by including
both of these entries in the site configuration:

  [[module.mounts]]
  source = 'assets'
  target = 'assets'

  [[module.mounts]]
  source = 'static'
  target = 'assets'

```

---

<div class="post-metadata">

**Author:** ![Soham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/soham/32/18788_2.png) [@Soham](https://discourse.gohugo.io/u/Soham)\
**Post date:** [February 13, 2023, 4:28pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948/5 "2023-02-13T16:28:47Z")

</div>

> [@jmooring](#):
>
> `/sohamwhocodes/`

Thank you very much good sir! This helped.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [February 15, 2023, 4:29pm UTC](https://discourse.gohugo.io/t/not-able-to-render-images/42948/6 "2023-02-15T16:29:32Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.