如何使用JSON和vue.js在同一个Object属性中显示图像和文本

Question

已经有一段时间了，因为我已经能够在vue中工作。我试着把我的文字和图片放在同一个"内容"里。属性，但是当我在本地服务器上测试它时，它没有解析文件路径。我在我的div上使用v-html，它带来了文本，但是显示了一个错误的图像标记不能GET文件路径。

我对象:

{
"id": 1,
"category": "Headline",
"info": {
"headline": "Secondary Header",
"content": "<p>this is text</p><img class='content-img' src='./assets/my-image.jpg' /><p>This is more text</p>"
}
}

我的html:

<template>
<div class="help-content">
<h1>{{this.helpList[myIndex].category}}</h1>
<div v-html="this.helpList[this.myIndex].info.content"></div>
</div>
</template>
<script>
export default {
name: 'HelpContent',
props: ['loadedCategory', 'myIndex'],
computed: {
helpList () {
return this.$store.state.helpList
}
}
}
</script>
<style scoped lang="scss">
</style>

从我的理解，我认为我不需要写额外的代码，以解决这个问题?我不能用正确的关键字搜索，因为我找不到线程，这是显示。会有多个对象，所有的内容对象都有不同的文本和图像，这就是为什么我不能将图像分离到它自己的对象

Answer 1

选择将我的图像添加到公共文件夹并使用绝对路径