NUXT:使用markdown显示图像-它相对于标记内容
NUXT:使用markdown显示图像-它相对于标记内容
提问于 2022-02-03 11:00:41
这是为了实现一个纯静态的Nuxt。我使用的是从yaml内容文件中读取的标记内容(而不是标记)。由于内容在json对象中，所以使用$md.render(blog.content)呈现它们。假设blog.content是一个标记字符串。
模板如下：
...
<div v-html="$md.render(blog.content)></div>
...nuxt.config.js文件具有以下内容：
export default {
target: static,
...
modules: [
'@nuxt/content',
'@nuxtjs/markdownit',
...
],
markdownit: {
runtime: true,
html: true,
},
...
}这与常规md字符串的预期效果一样。
我想使用存储在博客页面图片子目录中的图像(而不是来自资产或静态目录)。并在减价字符串中引用它。
内容目录的结构是：
content
blogs
blog1
images
b1i1.png
b1i2.png
content.yaml
blog2
images
content.yaml
...减价字符串可以是这样的
# Study this Digaram
The following is a diagram
<img src="images/b1i1" alt="diagram"/>是否有一种将此图像发送给vue以将其解析为生成图像的路径的方法？谢谢
回答 1
Stack Overflow用户
发布于 2022-02-03 16:39:21
默认情况下，Nuxt内容查找存储在“静态”目录下的图像。如果你想从不同的地方访问图像(IE博客/片段/图片)
您必须手动“要求”它们，或者为此使用自定义组件，如下所示
src/components/VImg.vue
<template>
<img :src="imgSrc()" :alt="alt" />
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
},
alt: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
methods: {
imgSrc() {
try {
return require(`~/content${this.path}/images/${this.src}`)
} catch (error) {
return null
}
},
},
}
</script>path支柱是以斜杠为前缀的博客帖子的目录名(例如: /blog1)src螺旋桨是图像名(例如: b1i1.png)
然后在您的博客require(**~/content${this.path}/img/${this.src}**)文件中使用它而不是<img/>标记(确保根据项目结构更改_id )。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70970096
复制相关文章
相似问题
腾讯云开发者
