Nuxt markdownit image in assets not found

Question

I have a nuxt markdownit page, "foo.vue":

<template lang="md">
<img src="~assets/images/my-logo.png">
</template>

And that file exists:

assets
├── README.md
├── images
│   ├── my-logo.jpg
│   └── image1.png
└── style
    ├── app.styl
    └── variables.styl

but when I compile it, I get an error:

ERROR  Failed to compile with 1 errors
This dependency was not found:  
* assets/images/my-logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@nuxtjs/markdownit-loader??ref--14-oneOf-0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/horizon.vue?vue&type=template&id=1077489c&lang=md&

What am I doing wrong? I assume I'm not configuring the loader properly somehow.

The relevant section of nuxt.config.js is this:

  markdownit: {
    preset: 'default',
    linkify: true,
    typographer: true,
    // breaks: true,
    use: [
      'markdown-it-attrs', // add HTML classes/attrs with {.foo attr=value}
      ['markdown-it-style', {
        h1: 'font-size: 210%; margin-bottom: 10px',
        h2: 'font-style: italic; margin-top: 10px',
        h3: 'margin-top: 10px',
        a: 'color: #ddddff' // doesn't work :-(
      }]
    ]
  },

Answer 1

Try adding '/' after '~' like this ~/assets/images/my-logo.png.

OR

Try :src="require('~/assets/images/my-logo.png')"