时间戳

首页 > 解决方案 > 在计算属性中连接多个 vue-loader 要求以定义 srcset 属性 Vue.js (Nuxt)

vue.js - 在计算属性中连接多个 vue-loader 要求以定义 srcset 属性 Vue.js (Nuxt)

问题描述

我需要一个建议，请

在尝试了很多方法来创建一个支持本机延迟加载的可重用图片元素组件并回退到 Lazysizes.js 库并接受可变数量的图像源类型和尺寸（in<source>和他的srcset属性）之后，我仍然陷入困境。

为了实现这一点，我希望require在计算方法中使用多个，并且在从方法返回之前需要将它们连接起来（因为我需要require为每个可用的图像尺寸）但我再次伤害了我认为的require限制。

没有找到 img 依赖项，因为我认为require没有像我假设的那样解决。这是我的代码以帮助您理解：

// parent component
<picture-elem
  :name="`${img}`"
  :img-alt="`${alt}`"
  :formats="['webp','jpg']"
  :sizes="[['512x768', '2x'], ['256x384', '1x']]"
  :img-class="'product-img'"
  :lazy="lazyloadImg" //true of false depending the context
/>


//in PictureElem component <template>
  <picture>
    <source
      v-if="formats.indexOf('webp') != -1"
      :srcset="(!lazy) ? srcsetWebp : false"
      :data-srcset="(lazy && !loadingAttrSupport) ? srcsetWebp : false"
      type="image/webp"
    >
    ... // other sources element for every accepted image types
    <img ... //fallback img
  </picture>


//in script > computed methods, an example of the problematic part with webp
computed: {
  getSizesLength () {
    return this.sizes.length
  },
  srcsetWebp () {
    let srcset = ""

    //loop through the array of availaible images srcset sizes
    for (let i = 0; i < this.getSizesLength; i++) {
      // require ( [path] + [base name] + [dimension] + [targeted resolution or screen width]
      srcset += `${require(`@/assets/img/${this.name}-${this.sizes[i][0]}.webp`)} ${this.sizes[i][1]}`
      
      // if there is following sizes, add a comma (,)
      if (i < (this.getSizesLength - 1)) {
        srcset += ", "
      }
    }
    return srcset
  }

我总是接受它：

Failed to compile with 1 errors

This dependency was not found:

* @/assets/img/img-name.webp in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/PictureElem.vue?vue&type=script&lang=js&

我也尝试使用“~/assets/img/..”我来宾问题在于连接require，因为我的调试检查确认了我。

我也知道一个普通的

return `${require(`@/assets/img/${this.baseName}_480.jpg`)} 480w, ${require(`@/assets/img/${this.baseName}_800.jpg`)} 800w`

应该按照 Alexander Lichter 的解释工作： https ://blog.lichter.io/posts/dynamic-images-vue-nuxt/#bonus---using-srcset

这不是我的第一种方式，我在许多文章中的发现启发下尝试了不同的路径。这是我为这个组件计划的所有灵活性和足够干燥度的最后希望......

我将尝试使用 a在组件父<slot>级中定义确切require的 s 但我真的很想了解是否有办法以我尝试或确认required不能以这种方式使用的方式实现我想要的（连接）。

提前感谢您的时间

标签： vue.jswebpacknuxt.jssrcset

解决方案

我终于发现我的问题出在其他地方，问题中没有显示以简化理解的部分，但我发现您不能require在路径的开头使用字符串变量。我是这样打电话的：

${require(`${this.imagePath}${this.name}-${this.sizes[i][0]}.webp`)}

但它似乎require无法解决这样的路径。添加路径解决了问题：

${require(`~/assets/img/${this.name}-${this.sizes[i][0]}.webp`)}
// @/assets also works but as it is deprecated in the Nuxt docs I replaced the pointer with "~" everywhere.

并注意您是否忘记编写完整路径（例如缺少/img/部分），因为require将尝试获取资产中的所有文件，并且会为每个资产（如字体文件或任何其他不适合 vue-loader 的资产）输出错误又名 webpack 加载器（我认为是这样）。

推荐阅读