Динамічні зображення Vue.js не працюють

У мене є випадок , коли в моєму Vue.jsз webpackвеб - додаток, мені потрібно , щоб відобразити динамічні зображення. Я хочу показати, imgде ім'я файлу зображень зберігається у змінній. Ця змінна - це computedвластивість, яка повертає Vuexзмінну сховища, яка заповнюється асинхронно beforeMount.

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

Однак це чудово працює, коли я просто роблю:

<img src="../assets/dog.png" alt="dog">

Мій випадок схожий на цю скрипку , але тут він працює з URL-адресою img, але в моєму з фактичними шляхами файлів це не працює.

Яким повинен бути правильний спосіб це зробити?

Я отримав це, працюючи за таким кодом

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
  }

та в HTML:

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

Але не впевнений, чому мій попередній підхід не спрацював.

Ось скорочення, яке буде використовувати веб-пакет, тому вам не доведеться його використовувати require.context.

HTML:

<div class="col-lg-2" v-for="pic in pics">
    <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

Метод Vue:

getImgUrl(pic) {
    return require('../assets/'+pic)
}

І я вважаю, що перші 2 абзаци тут пояснюють, чому це працює? Ну.

Зверніть увагу, що корисно розміщувати фотографії улюбленців у підкаталозі, замість того, щоб вкладати їх у всі інші зображення. Подобається так:./assets/pets/

Ви можете спробувати requireфункцію. подобається це:

<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />

Існує ще один спосіб зробити це, додавши файли зображень до загальної папки замість ресурсів та отримавши доступ до них як статичні зображення.

<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >

Тут потрібно розмістити статичні зображення:

Найкраще - просто використовувати простий метод, щоб побудувати правильний рядок для зображення за заданим індексом:

methods: {
  getPic(index) {
    return '../assets/' + this.pics[index] + '.png';
  }
}

тоді виконайте наступне всередині вашого v-for:

<div class="col-lg-2" v-for="(pic, index) in pics">
   <img :src="getPic(index)" v-bind:alt="pic">
</div>

Ось JSFiddle (очевидно, що зображення не відображаються, тому я поклав зображення srcпоруч із ним):

https://jsfiddle.net/q2rzssxr/

Я також потрапив у цю проблему, і здається, що обидві найбільш прихильні відповіді працюють, але є крихітна проблема, webpack видає помилку в консолі браузера (Помилка: Не вдається знайти модуль './undefined' на webpackContextResolve), що не дуже приємно.

Тож я вирішив це дещо інакше. Вся проблема з оператором require в змінній усередині полягає в тому, що оператор require виконується під час групування, а змінна всередині цього оператора з'являється лише під час виконання програми у браузері. Отже, веб-пакет бачить потрібне зображення невизначеним у будь-якому випадку, оскільки під час компіляції ця змінна не існує.

Те, що я зробив, - це помістити випадкове зображення в оператор require і приховати це зображення в css, щоб ніхто його не бачив.

// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />

//js
data() {
  return {
    userAvatar: require('@/assets/avatar1.svg'),
    hidden: true
  }
}

//css
.hidden {display: none}

Зображення надходить як частина інформації з бази даних через Vuex і відображається на компонент як обчислюваний

computed: {
  user() {
    return this.$store.state.auth.user;
  }
}

Отже, коли ця інформація стає доступною, я поміняю початкове зображення реальним

watch: {
  user(userData) {
    this.userAvatar = require(`@/assets/${userData.avatar}`);
    this.hidden = false;
  }
}

Ось дуже проста відповідь. : D

<div class="col-lg-2" v-for="pic in pics">
   <img :src="`../assets/${pic}.png`" :alt="pic">
</div>

Ви можете використовувати спробу catch block, щоб допомогти з не знайденими зображеннями

getProductImage(id) {
          var images = require.context('@/assets/', false, /\.jpg$/)
          let productImage = ''
          try {
            productImage = images(`./product${id}.jpg`)
          } catch (error) {
            productImage = images(`./no_image.jpg`)
          }
          return productImage
},

<img src="../assets/graph_selected.svg"/>

Статичний шлях вирішується Webpack як залежність модуля через завантажувач. Але для динамічного шляху вам потрібно використовувати require для вирішення шляху. Потім ви можете переключатися між зображеннями, використовуючи булеву змінну та трикутний вираз.

<img :src="this.graph ? require( `../assets/graph_selected.svg`) 
: require( `../assets/graph_unselected.svg`) " alt="">

І звичайно перемикати значення логічного значення через якийсь обробник подій.

ну найкращим і найпростішим способом, який працював у мене, був той, про який я отримував дані з API ..

methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 }

метод getPic приймає один параметр, який є ім'ям файлу, і він повертає абсолютний шлях до файлу, можливо, із вашого сервера з простим ім'ям файлу ...

ось приклад компонента, де я використовував це:

<template>
    <div class="view-post">
        <div class="container">
     <div class="form-group">
             <label for=""></label>
             <input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
             <small id="helpId" class="form-text user-search text-muted">search for a user here</small>
           </div>
           <table class="table table-striped ">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>email</th>
                       <th>age</th>
                       <th>photo</th>
                   </tr>
                   </thead>
                   <tbody>
                       <tr v-bind:key="user_data_get.id"  v-for="user_data_get in data_response.data">
                           <td scope="row">{{ user_data_get.username }}</td>
                           <td>{{ user_data_get.email }}</td>
                           <td>{{ user_data_get.userage }}</td>
                           <td><img :src="getPic(user_data_get.image)"  clas="img_resize" style="height:50px;width:50px;"/></td>
                       </tr>

                   </tbody>
           </table>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
export default {
     name: 'view',
  components: {

  },
  props:["url"],
 data() {
     return {
         data_response:"",
         image_path:"",
     }
 },
 methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 },
 created() {
     const res_data = axios({
    method: 'post',
    url: this.url.link+"/view",
   headers:{
     'Authorization': this.url.headers.Authorization,
     'content-type':this.url.headers.type,
   }
    })
    .then((response)=> {
        //handle success
      this.data_response = response.data;
      this.image_path = this.data_response.user_Image_path;
       console.log(this.data_response.data)
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });
 },
}
</script>


<style scoped>

</style>

Я зіткнувся з тією ж проблемою. Це спрацювало для мене, змінивши "../assets/" на "./assets/".

 <img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">

Спробуйте імпортувати подібне зображення, оскільки Webpack повинен знати про його залежність

    <ul>
              <li v-for="social in socials" 
              v-bind:key="social.socialId"
              >

                <a :href="social.socialWeb" target="_blank">
                  <img class="img-fill" :id="social.socialId" :src="social.socialLink" :alt="social.socialName">
                </a>
              </li>

            </ul>

<script>
        import Image1 from '@/assets/images/social/twitter.svg'
        import Image2 from '@/assets/images/social/facebook.svg'
        import Image3 from '@/assets/images/social/rss.svg'
        export default {
          data(){
            return{
              socials:[{         
                   socialId:1,         
                   socialName: "twitter",
                   socialLink: Image1,
                   socialWeb: "http://twitter.com"
              },
      {
          socialId:2,
          socialName: "facebook",
           socialLink: Image2,
           socialWeb: "http://facebook.com"

      },
      {
          socialId:3,
          socialName: "rss",
           socialLink: Image3,
           socialWeb: "http://rss.com"
      }]

 </script>