Вопрос:

Динамические изображения Vue.js не работают

javascript html vue.js vuejs2

21240 просмотра

5 ответа

29055 Репутация автора

У меня есть случай , когда в моем 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">

Мой случай похож на эту скрипку , но здесь он работает с img URL, но в моем случае с реальными путями к файлам он не работает.

Какой должен быть правильный способ сделать это?

Автор: Saurabh Источник Размещён: 08.11.2016 04:07

Ответы (5)


8 плюса

14480 Репутация автора

Лучше всего просто использовать простой метод для построения правильной строки для изображения с заданным индексом:

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/

Автор: craig_h Размещён: 08.11.2016 04:57

37 плюса

29055 Репутация автора

Решение

Я получил это работает по следующему коду

  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>

Но не уверен, почему мой предыдущий подход не сработал.

Автор: Saurabh Размещён: 08.11.2016 05:30

9 плюса

1220 Репутация автора

Вот сокращение, которое будет использовать веб-пакет, поэтому вам не нужно его использовать 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/

Автор: Grigio Размещён: 24.11.2017 09:35

0 плюса

785 Репутация автора

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

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

Вот где вам нужно поместить ваши статические изображения:

введите описание изображения здесь

Автор: Rukshan Dangalla Размещён: 15.01.2019 03:41

0 плюса

1 Репутация автора

Попробуйте импортировать изображение, как это, потому что 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>
Автор: perun10 Размещён: 24.01.2019 10:17
Вопросы из категории :
32x32