自動填充圖片網址

Question

我正在檢查瀏覽器是否為chrome。 如果是chrome，那么我只顯示具有（data-mobileWebp）或（data-desktopWebp）屬性的Webp圖像。 有時，webp圖像不會在后端上傳，因此我需要退回到通常總是像data-mobileImage或data-desktopImage一樣上載的普通圖像

這里的代碼無法正常工作是：

mobileImage = $('.mobileImages', picture).data('mobileWebp') != null ? $('.mobileImages', picture).attr('data-mobileWebp') : $('.mobileImages', picture).attr('data-mobileImage');
desktopImage = $('.desktop-images', picture).data('desktopWebp') != null ? $('.desktop-images', picture).attr('data-desktopWebp') : $('.desktop-images', picture).attr('data-desktopImage');

 var is_chrome = (typeof window.chrome === 'object' && navigator.appVersion.indexOf('Edge') === -1); var imageBrowsers = $('.image-browsers'); if (imageBrowsers.length > 0) { imageBrowsers.each(function(picture) { var mobileImage, desktopImage; if (is_chrome) { mobileImage = $('.mobileImages', picture).data('mobileWebp') != null ? $('.mobileImages', picture).attr('data-mobileWebp') : $('.mobileImages', picture).attr('data-mobileImage'); desktopImage = $('.desktop-images', picture).data('desktopWebp') != null ? $('.desktop-images', picture).attr('data-desktopWebp') : $('.desktop-images', picture).attr('data-desktopImage'); } else { mobileImage = $('.mobileImages', picture).attr('data-mobileImage'); desktopImage = $('.desktop-images', picture).attr('data-desktopImage') } $('.mobileImages', picture).attr('srcset', mobileImage); $('.desktop-images', picture).attr('src', desktopImage); }); } 

 <isif condition="${desktopImage || mobileImage}"> <picture class="image-browsers"> <isif condition="${mobileImage}"> <source class="mobileImages" srcset="" media="(max-width: 768px)" data-mobileImage="${mobileImage ? mobileImage.getURL() : ''}" data-mobileWebp="${mobilewebpImage ? mobilewebpImage.getURL() : ''}"> </isif> <isif condition="${desktopImage}"> <img class="desktop-images" src="" alt="${'previewName' in contentAsset.custom && contentAsset.custom.previewName != null ? contentAsset.custom.previewName : '' }" title="${'previewName' in contentAsset.custom && contentAsset.custom.previewName != null ? contentAsset.custom.previewName : '' }" data-desktopImage="${desktopImage ? desktopImage.getURL() : ''}" data-desktopWebp="${desktopwebpImage ? desktopwebpImage.getURL() : ''}"> </isif> </picture> </isif> 

Answer 1

您為什么不使用Modernizr？

Modernizr.on('webp', function (result) {

  console.log(result);  
  if (result) {
    // Has WebP support
  }
  else {
    // No WebP support
  }
});

http://www.stucox.com/blog/using-webp-with-modernizr/