2

хочу вывести li с текстом и картинками

<ul>
  <li v-for='item of items' :key="item.class"  class="cryptoblock">
   <img  :src="item.src" alt="">
   <p>{{item.text}}</p>
  </li>
</ul>

в data такая информация

  data(){
      return{
      items:[
      {class: '1',  src: '../assets/BTC.png', text : 'Bitcoin'},
      {class: '2', src: '../assets/USDT.png',  text : 'Tether'},
      {class: '3', src: '../assets/GAS.png',  text : 'Neo'},
      {class: '4', src: '../assets/ETH.png',  text : 'Ethereum'},
      {class: '5', src: '../assets/EOS.png',  text : 'EOS'},
         ]
         } 
       }

текст и путь выводятся, но картинки при этом не обнаруживаются. Заметил, что при выводе картинки обычным образом к ее имени прибавляются символы и выглядит это так src="/img/ETH.0d24b27d.png"

Что сделать чтобы картинки отображались нормально, спасибо.

6
  • обычным образом это как? А то img и assets несколько разные пути.
    – user256824
    20 мая 2019 в 10:13
  • Как понять при выводе картинки обычным образом к ее имени прибавляются символы?
    – XelaNimed
    20 мая 2019 в 10:13
  • @РустамГимранов когда я пишу путь ../assets/ETH.png и смотрю на картинку через код элемента, то вижу /img/ETH.0d24b27d.png 20 мая 2019 в 10:16
  • Вот так сделайте <p>{{item.text}}</p><p>{{item.src}}</p>, чтобы видно было что на самом деле отображено.
    – user256824
    20 мая 2019 в 10:18
  • @РустамГимранов выводит то, что в data, но при этом картинка не выводится, неправильный путь. В комментарии выше я описывал случай когда прописывал путь напрямую, а не выводил через item.src 20 мая 2019 в 10:22

2 ответа 2

5

Исправленно. В методах создаём метод

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

Вешаем его на :src=getImgUrl('picName'), где picName - название нужной картинки из директории '../assets/'

6
  • 1
    Хеши ж добавляются только к файлам созданным Webpack, или нет?
    – Dmytro
    20 мая 2019 в 10:40
  • @Дмытрык да. Но мало ли :) 20 мая 2019 в 10:43
  • @Emil Rotatew обновил ответ. Это должно работать. У меня сработало. 20 мая 2019 в 10:43
  • @AlexSazonov мне нужно вывести их циклом, в аргументе указать массив или что? и еще проблемы когда ввожу название, выдает ошибку. Ввожу следующим образом :src=getImgUrl('BTC.png') 20 мая 2019 в 15:28
  • @EmilRotatew нет, в аргументе указать getImgUrl(item.src), при этом в самом массиве у элементов убрать сам путь. То есть будет {class: '1', src: 'BTC.png', text : 'Bitcoin'}, 21 мая 2019 в 4:15
2

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

Папка куда генерится контент настраивается в WebpackConfig.js

Как же эти изображения туда поместить ?

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

Второй вариант, правильный, как написал уважаемый @AlexSazonov ответом выше делать нужно через require, тогда изображение будет идти через вебпак и автоматически из приватных папок будет копироваться в публичную, однако тут важно не забыть прикрутить плагин CopyWebpackPlugin

Пример как это делается можете посмотреть тут

В этом случае все ваши картинки при сборке будут жить там где им нужно и к ним естественно будет доступ.

Ну а циферки добавляемые к концу файла нужня для того чтоб у вас не кешировались данные между сборками.

3
  • я сделал так же как было в примере , но я не заметил того, чтобы картинки перемещались в указанную мной директорию, при этом я установил CopyWebpackPlugin и настроил его. Насколько я понял, сейчас мои картинки помещаются в папку img, но где это настраивается я понять не могу 20 мая 2019 в 15:24
  • @EmilRotatew по идее это все настраивается именно в webpackconfig. И все изображения поражающие через require при правильной работе плагина копируются в нужное место. Попробуйте поискать рабочие примеры. У меня вебпак обернут symfony encore, по сему мой рабочий код для вас будет неинформативен.
    – zalex
    20 мая 2019 в 18:06
  • @EmilRotatew. Вот например в этом компонент импортируется изображение logo. github.com/Kolbasyatin/IFS_2019/blob/master/assets/js/vue/… А тут обёрнутый конфиг github.com/Kolbasyatin/IFS_2019/blob/master/webpack.config.js. Но не уверен что очень поможет
    – zalex
    20 мая 2019 в 18:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.