Как показать изображения, связанные с идентификатором в базе данных? - PullRequest
Новая
       11

Как показать изображения, связанные с идентификатором в базе данных?

1 голос
/ 03 июля 2019

У меня есть строка поиска в vue.js / native, которая предоставляет предварительный список изображений из базы данных, соответствующей заданному ключевому слову. Чего я хочу добиться, так это того, что после нажатия на одно из изображений предварительного просмотра это изображение отображается. До сих пор я могу получить одно и то же изображение для всех предварительно просмотренных изображений, набрав его URL. URL-адрес одинаков для каждого изображения с единственным различием уникального идентификатора (например, 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 был определен ранее. Я знаю, что это неправильно, но я считаю, что лучший способ сделать это - написать общую часть ссылки, а затем добавить идентификационный номер, связанный с данным идентификатором).

Я также попытался установить изображение в качестве переменной, добавив уникальный идентификационный номер для каждого идентификатора и показав его с помощью document.write, но это не сработало.

Спасибо за вашу помощь и предложения заранее

1 Ответ

0 голосов
/ 03 июля 2019

Это довольно широкий вопрос, и есть много способов достичь того, что вы хотите сделать.

Вы можете сделать что-то вроде следующего: 

<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 для перебора операторов шаблона.Взгляните на раздел List Rendering документации Vue для примеров.

...