Not able to render images

support
1

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
image930×160 11.9 KB

2

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.

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.

3

Please find my repo here: GitHub - sdthaker/blogpost @jmooring

4

You are serving your site from a subdirectory:

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

![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 
{{- /*
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 
{{- /*
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:

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'
1 Like
5

Thank you very much good sir! This helped.

6

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