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。

OR

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

找不到资产中的Nuxt markdownit图像

1 个答案: