Vue.js 资产文件夹中的图像未使用Vue Js显示

我试着在这里寻找不同的答案，但无法解决我的问题。 我有一个Json服务器，其中包含一些数据：

file.json
    {
      "post": [
        {
          "id": "1",
          "title": "Title",
          "description": "Este e um post para saberes mais clica aqui",
          "article": "Hoje este e um novo post etc e tal",
          "photo": "image-1.jpg"
        },
        ]
    }

我希望我的组件在v-for中渲染“photo”上的图像，因为我不希望每次添加新组件时都硬编码。这是我的组件中的内容。vue：

快乐算法
{{post.title}}

{{post.description}}

从“@/./services.js”导入{api}；
导出默认值{
名称：“最新邮件”，
道具：[“id”]，
数据（）{
返回{
员额：[]，
};
},
方法：{
getAllPosts（）{
this.posts=[]；
获取（`/post`）。然后（响应=>{
this.posts=response.data；
console.log（this.posts）；
});
},
},
创建（）{
这是.getAllPosts（）；
},
};

我已经测试过添加一个在线图像，而不是我的资产中的图像，效果非常好，所以我不确定当我尝试从资产中加载图像时为什么不起作用

这就是它的显示方式

试一下

<img
class=" mt-8 pt-32 "
:src="require(`../assets/${post.photo}`)"
:alt="post.title"/>

查看并

如果要动态加载图像（在使用

{{post.photo}}

的情况下），必须将图像移动到

/path/to/project/public/

文件夹中。您可以通过以下方式构建src url：

<img class="mt-8-pt-32" :src="'/' + post.photo" :alt="post.title">

---

当您的公共路径不同时，请将

'/'

替换为

process.env.BASE\u URL

您的意思是-->:src=“require（

。/assets/${post.photo}

）”。不起作用它不允许我出现解析错误（解析错误：未加引号的属性值中出现意外字符）：src=“require（`../assets/${post.photo}`）”工作正常是的，这是我尝试过的，但不起作用。除了上面提到的，我没有从组件中得到任何东西，呈现的${}是可以在反勾号内访问的模板文本，而不是在引号或双引号内。您有任何错误吗？