Проблема при загрузке изображения динамически с Vue и Webpack - PullRequest
Новая
       58

Проблема при загрузке изображения динамически с Vue и Webpack

1 голос
/ 20 марта 2020

Я начал создавать приложение с помощью Vue CLI, и у меня есть следующий фрагмент кода в компоненте: 

<template>
  <div v-loading="loading">
    <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="element in persons" :key="element.id">
            <div class="testimonial-persons">
                <el-avatar :size="80">
                    <img :src="require('@assets/testimonial/'+ element.photo)"> 
                </el-avatar>
                <h3>{{element.name}}</h3>
                <h4>{{element.occupation}}</h4>
                <hr style="width:50%;">
                <p>"{{element.comment}}"</p>
            </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

Когда страница загружена, я делаю запрос на API, который возвращает массив объектов, которые я храню в persons для итерации по шаблону.

Персоны 

[ 
    { 
        "testimonial_id": "2",
        "persons_id": "1",
        "id": "1", 
        "name": "Tom lima", 
        "occupation": "CEO / Pugmania",
        "comment": "Simply the best customer service and attention to detail.",
        "photo": "20200320193143R7pChVea3IkmujRRmS.png" 
    },

]

Все работает нормально, проблема с загрузкой изображения.

enter image description here

Когда я ввожу имя изображения вручную, оно работает. 

  <img src="@assets/testimonial/20200320193143R7pChVea3IkmujRRmS.png">

Кто-нибудь знает, как решить?

1 Ответ

2 голосов
/ 20 марта 2020

Ваш шаблон правильный, за исключением того, что вам не хватает / после @. Это должно быть: 

<img :src="require('@/assets/testimonial/' + element.photo)">

Это необходимо и для ручного использования, поэтому, возможно, вы не указали его при преобразовании в динамический c путь.

...