如何在数据库中显示与 ID 相关的图像？

Question

我在 vue.js/native 中有一个搜索栏，它提供了数据库中与给定关键字匹配的图像的预览列表。我想要实现的是，在单击其中一个预览图像后，将显示该图像。到目前为止，我只能通过输入其 url 来获得所有预览图像的相同图像。每个图像的 url 都是相同的，唯一的区别是唯一的 ID（例如https://myimagedatabase.com/cases/getImage.php?id=1、https://myimagedatabase.com/cases/getImage.php?id=2、https://myimagedatabase.com/cases/getImage.php?id=3 等）

到目前为止，我已经尝试过：

 <Image src="https://myimagedatabase.com/cases/getImage.php?id=1/>

它返回图像，但当然对于我的预览列表中的每个项目都是相同的。

也试过了：

<Image src="https://myimagedatabase.com/cases/getImage.php?id=" + result[i].myIDs />

（myIDS 之前已定义。我知道这是错误的，但我认为最好的方法应该是编写链接的公共部分，然后添加与给定 ID 相关的 ID 号）。

我还尝试将图像设置为变量，为每个 ID 添加唯一 ID 号并使用 document.write 显示它，但它不起作用。

提前感谢您的帮助和建议

Answer 1

这是一个相当广泛的问题，有很多方法可以实现您想要做的事情。

您可能会执行以下操作：

<template>
...
    <Image v-for="image in result" :src="getImageSrc(image.myIDs)"/>
...
</template>

<script>
...
  methods: {
  ...
    getImageSrc: (id) => `https://myimagedatabase.com/cases/getImage.php?id=${id}`
  ...
  }
...
</script>

我在您的代码中看到了result[i].myIDs。

确保您使用v-for 来迭代模板语句。有关示例，请查看 Vue 文档的 List Rendering 部分。