nuxt.js - 未找到资产中的 Nuxt markdownit 图像

Question

我有一个 nuxt markdownit 页面，“foo.vue”：

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

并且该文件存在：

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

但是当我编译它时，我得到一个错误：

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&

我究竟做错了什么？我假设我没有以某种方式正确配置加载程序。

的相关部分nuxt.config.js是这样的：

  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

像这样尝试添加'/'。'~'~/assets/images/my-logo.png

或者

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