Question

我在vue.js / native中具有搜索栏，该栏提供了与给定关键字匹配的数据库中图像的预览列表。我要实现的是，单击预览图像之一后，将显示该图像。到目前为止，我只能通过键入其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部分以获取示例。

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

1 个答案: