Как вы выводите изображение из вызова ax ios в элемент Vuejs img? Я не видел ничего, что работает - PullRequest
Новая
       3

Как вы выводите изображение из вызова ax ios в элемент Vuejs img? Я не видел ничего, что работает

1 голос
/ 26 февраля 2020

Я видел немало способов сделать это. Первоначально я хотел сохранить изображение и вызвать его из базы данных для просмотра, но я не уверен, где его хранить и как правильно его назвать (:src="prizes.image_url") ??

Изображение хранится на стороне клиента 

{
    id: 2,
    name: "Merano MC400 Cello",
    description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
    image_url: "../assets/images/c5Cor.png",
    quantity: 3
}

getPrizes() {
  axios.get('http://localhost:3000/prizes').then(response => {
    this.prizes = response.data
    console.log(response.data)
  })
}

<div v-for="prize in prizes" :key="prize.id">
   <div class="card_individual">
      <div class="card-media-container">
         <img class="card_image" :src="prize.image_url" alt="instruments"/>
      </div>
      <div class="card-detail-container">
         <div class="card_title">Win a {{ prize.name }}</div>
      </div>
      <div class="modal-footer">
         <router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
      </div>
   </div>
</div>

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Краткий ответ

Поместите все свои изображения в каталог assets (или подкаталог). Сохраните только имя файла в вашем JSON как image_url: "c5Cor.png" и покажите его как: 

<img :src="require('@/assets/' + prize.image_url)" />

Другие комментарии

Webpack связывает папку assets , которая переименовывает пути / имена файлов содержимого. Вот почему require необходим - при привязке src к переменной - чтобы получить правильный путь во время выполнения.

Когда вы говорите клиент / сервер, вы можете иметь в виду фронтэнд / бэкэнд. Они отличаются тем, что ресурсы как внешнего, так и внутреннего интерфейса обслуживаются с сервера. Например, это утверждение «Изображение хранится на стороне клиента»: если вы не сохранили изображение в localStorage, indexedDB и т. Д. c, неточно. Хранение изображений в каталоге Vue assets является серверным интерфейсом. База данных будет серверной серверной частью.

Так что, если вы не намереваетесь спросить о хранении изображений в localStorage, лучше сформулировать фразу: «Должен ли я хранить изображения в базе данных или в виде файлов?». На типичном веб-сайте вы должны хранить изображения в виде файлов и хранить только имена файлов в вашей базе данных. (Можно хранить двоичные данные необработанных изображений в базе данных - большой двоичный объект - и есть некоторые споры о том, когда это хорошая идея, но это, вероятно, статистически редко на типичных веб-сайтах.) Это проще хранить их как файлы.

0 голосов
/ 26 февраля 2020

Запросите img и назначьте его как blob: 

<img class="card_image" :src="getImageBlob(prize.image_url)" alt="instruments"/>

  <div v-for="prize in prizes" :key="prize.id">
    <div class="card_individual">
      <div class="card-media-container">
        <img class="card_image" :src="getImageBlob(prize.image_url)" alt="instruments"/></div>
      <div class="card-detail-container">
        <div class="card_title">Win a {{ prize.name }}</div>
      </div>
      <div class="modal-footer">
        <router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
      </div>
    </div>
  </div>

  getPrizes () {
    axios.get('http://localhost:3000/prizes')
      .then(response => (this.prizes = response.data)
  },
  getImageBlob (image_url) {
    return axios.get(image_url).then(response => window.URL.createObjectURL(response.data))
  }

Точно так же, если вы хотите сохранить его в своей базе данных, вы также можете сохранить response.data в своей базе данных .

...