Vue CLI3 приложение, HTML srcset и атрибуты размеров не поддерживаются? - PullRequest
Новая
       8

Vue CLI3 приложение, HTML srcset и атрибуты размеров не поддерживаются?

0 голосов
/ 11 октября 2018

Я пытаюсь использовать атрибуты HTML srcset и sizes для адаптивных изображений, чтобы предоставить определенное изображение с определенным размером экрана для оптимизации производительности и адаптивного дизайна.Но Vue-loader, кажется, не поддерживает их, у кого-нибудь была похожая проблема?Если нет, то что может быть возможным решением для наилучшей оптимизации производительности приложения, на которое в основном влияют изображения высокой четкости.Ниже приведен пример того, что я пытаюсь реализовать в шаблоне .vue 

<img srcset="../assets/img-1.jpg 300w,  ../assets/img-1-large.jpg 100vw" 
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="photo 1"
src="../assets/img-1-large.jpg">

, спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 04 мая 2019

Мой предпочтительный способ - использовать v-bind:srcset.

В примере (то же самое можно применить к sizes): 

<img 
   :src="require('@/assets/logo.png')" 
   :srcset="require('@/assets/logo.png') + ' 1x, ' + require('@/assets/logo@2x.png') + ' 2x'"/>

Примечания:

  • Преимущество - разметка находится на своем месте и нет необходимости чрезмерно усложнять JS-часть компонента
  • Недостаток - конкатенация строк не всегда хорошо читается
  • Использование @vs относительный формат в пути изображения для вас
0 голосов
/ 12 октября 2018

Итак, теперь он работает, как задумано, спасибо @Guto за его ссылку. Вот код, который дал мне желаемое поведение - переключать плотность и разрешение фотографии в соответствии с размером экрана и разрешением.

let photos = {
  photo1_sm : require('../assets/photo1-sm.jpg'),
  photo1_lg : require('../assets/photo1-lg.jpg')
  }
  
  export default {
    //...
    computed: {
      photos() { return photos }
      }
   }
 <img :srcset="`${photos.photo1_sm} 300w,${photos.photo1_lg}1000w`"
   sizes="(max-width: 990px) 20vw, (max-width: 37.5em) 30vw, 300px"
   alt="Photo 1"
   src="../assets/photo1.jpg">

PS.Я оставил атрибут src на тот случай, если браузер, который использует пользователь, не поддерживает атрибуты srcset или sizes, но я на самом деле протестировал его в инструментах разработчика Chrome, и фотография действительно меняется в зависимости от размера экрана.еще раз спасибо всем вам еще раз, ура :) 1012 *

...