Question

我正在尝试在调整窗口大小时重新计算srcset。我的模板中有一个图片元素，如下所示：

<picture>
  <source :srcset="{path-to-image}-lg.jpg" media="(min-width: 800px)">
  <source :srcset="{path-to-image}-md.jpg" media="(min-width: 400px)">
  <img id="my_image" :src="{path-to-image}-sm.jpg">
</picture>

使用以下eventListener：

methods: {
  setSrc () {
    if (!this.selected) return

    let width = window.innerWidth
    let img = document.getElementById('selected_image')
    let fileWithExt = img.src.split('/').pop()
    let filename = fileWithExt.split('.')[0]
    let size = filename.split('-').pop() // all images end in '-sm', '-md', '-lg'
    let picture = img.parentElement

    if (
      (width < 400 && size !== 'sm') ||
      (width >= 400 && width < 800 && size !== 'md') ||
      (width > 800 && size !== 'lg')
    ) {
      let html = picture.outerHTML
      picture.outerHTML = html
    }
  }
},
created () {
  window.addEventListener('resize', this.setSrc)
},
beforeDestroy () {
  window.removeEventListener('resize', this.setSrc)
}

事件侦听器可以完美地处理大小调整/媒体查询图像选择，但是，我意识到的是，替换图片的html可以替换DOM中绑定到vue的元素，而不能替换。所以我想我要面对的是：

是否有更好的方法来处理调整大小以使用Vue重新计算srcset？
如果最终这是处理调整大小的最佳方法，是否可以将图片元素重新绑定到Vue？

Answer 1

@HusamIbrahim因此，我想使用为这种事情制作的本机html5元素，但是由于我将不得不添加一些监听动态设置键的事件，因此我最终决定只使用v-if，else-if，else

更新为模板

<img v-if="breakpoint === 800" :src="selected.sizes.xl">
<img v-else-if="breakpoint === 400" :src="selected.sizes.lg">
<img v-else :src="selected.sizes.md">

我添加了breakpoint数据属性，并使用此getBreakpoint方法对其进行动态设置，如下所述，我既在created()上调用并设置了事件监听器：

getBreakpoint () {
  // if the window width divided by 400 rounded down returns a valid index
  // 0 thru 2, return the array item, else hardcode index to 2 and return 800
  this.breakpoint = [0, 400, 800][Math.floor(window.innerWidth / 400) <= 2 ? Math.floor(window.innerWidth / 400) : 2]
}

在Vue应用中重新计算srcset，元素绑定

1 个答案: