Django + Vue. js не может отображать изображения из базы данных - PullRequest
Новая
       5

Django + Vue. js не может отображать изображения из базы данных

0 голосов
/ 27 мая 2020

Я пытаюсь создать простой веб-сайт, который отображает список сборщиков средств из базы данных с изображением для каждого сборщика средств. Однако я не могу понять, почему изображения не появляются. Моя модель сбора средств выглядит следующим образом: 

class Fundraiser(models.Model):
    fundraiserImage = models.ImageField(upload_to='images/', blank=True)

Я попытался отобразить каждый сборщик средств в базе данных, как показано в файле vue ниже. 

template>
  <div>
    <div>
      <ul>
        <li v-for="f of fundraisers" v-bind:key="f.id">
          <img src="f.fundraiser.fundraiserImage.url" width="500">
        </li>
      </ul>
      {{fundraisers}}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Fundraiser',
  data () {
    return {
      fundraisers: []
    }
  },
  mounted: function () {
    this.getFundraisers()
  },
  methods: {
    getFundraisers: function () {
      // var app = this;
      axios.get('/api/fundraisers/?format=json')
        .then(response => (this.fundraisers = response.data))
    }
  }
}
</script>
<style>
</style>

Вот фрагмент соответствующего код из моего файла settings.py: 

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../frontend/dist/static/')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'mellon/media')

и фрагмент соответствующего кода из моего файла urls.py: 

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Ответы [ 2 ]

0 голосов
/ 31 мая 2020

вы должны объединить свой базовый каталог с именем файла изображения: и я думаю, что здесь нет базового URL-адреса в вашем sr c образе, он должен быть таким: 

<img :src="'127.0.0.1:8000/static/'+f.fundraiser.fundraiserImage.url">
0 голосов
/ 27 мая 2020

Я не vue разработчик, но думаю, что это должно сработать. 

<li v-for="fundraiser in fundraisers" v-bind:key="fundraiser.id">      
    <img src="${fundraiser.fundraiserImage.url}" width="500">
</li>
...