如何在 require 中使用模板文字？（要求（`${somePath}`））

Question

我正在尝试从 Vue 中的数组动态获取图像的路径，并使用 v-for 循环为每个图像显示延迟加载的图像。如果我使用模板文字，代码工作正常，但是 returns cannot find module: '~/assets/path/to/image' 当我在 require 函数中使用模板文字时。甚至可以将动态路径传递给 require 吗？这是与 Vue 或 JS 相关的问题吗？

这是一个例子：

<!-- The HTML -->
<template>
      <figure v-for="logo in logos" :key="logo.path" class="picture desktop-only">
        <picture>
          <source
            :data-srcset="require(`${logo.path}?webp`)"
            type="image/webp"
          />
          <source
            :data-srcset="require(logo.path)"
            type="image/jpg"
          />
          <img
            :data-src="require(logo.path)"
            class="lazyload"
            :alt="logo.alt"
          />
        </picture>
      </figure>
</template>

// The logos Array
            logos: [
                { path: "~/assets/images/berlinLogos/beuthBer.png", alt: "Beuth Hochschule für Technik Berlin"},
                { path: "~/assets/images/berlinLogos/fuBer.png", alt: "Freie Universität Berlin"},
                { path: "~/assets/images/berlinLogos/htwBer.png", alt: "Hochschule für Technik und Wirtschaft Berlin"},
                { path: "~/assets/images/berlinLogos/huBer.png", alt: "Humboldt Universität Berlin"},
                { path: "~/assets/images/berlinLogos/tuBer.png", alt: "Technische Universität Berlin"},
                { path: "~/assets/images/berlinLogos/uniPots.png", alt: "Universität Potsdam"}
            ]

这个有效：

      <figure class="picture desktop-only">
        <picture>
          <source
            :data-srcset="require(`~/assets/images/berlinLogos/beuthBer.png?webp`)"
            type="image/webp"
          />
          <source
            :data-srcset="require('~/assets/images/berlinLogos/beuthBer.png')"
            type="image/jpg"
          />
          <img
            :data-src="require('~/assets/images/berlinLogos/beuthBer.png')"
            class="lazyload"
            :alt="logo.alt"
          />
        </picture>
      </figure>

提前致谢！

编辑：

我的最终解决方案：

      <figure v-for="logo in logos" :key="logo.path" class="picture desktop-only">
        <picture>
          <source
            :data-srcset="logo.webp"
            type="image/webp"
          />
          <source
            :data-srcset="logo.path"
            type="image/jpg"
          />
          <img
            :data-src="logo.path"
            class="lazyload"
            :alt="logo.alt"
          />
        </picture>
      </figure>

            logos: [
                { path: require('~/assets/images/berlinLogos/beuthBer.png'), webp: require('~/assets/images/berlinLogos/beuthBer.png?webp'), alt: "Beuth Hochschule für Technik Berlin"},
                { path: require("~/assets/images/berlinLogos/fuBer.png"), webp: require('~/assets/images/berlinLogos/fuBer.png?webp'), alt: "Freie Universität Berlin"},
                { path: require("~/assets/images/berlinLogos/htwBer.png"), webp: require('~/assets/images/berlinLogos/htwBer.png?webp'), alt: "Hochschule für Technik und Wirtschaft Berlin"},
                { path: require("~/assets/images/berlinLogos/huBer.png"), webp: require('~/assets/images/berlinLogos/huBer.png?webp'), alt: "Humboldt Universität Berlin"},
                { path: require("~/assets/images/berlinLogos/tuBer.png"), webp: require('~/assets/images/berlinLogos/tuBer.png?webp'), alt: "Technische Universität Berlin"},
                { path: require("~/assets/images/berlinLogos/uniPots.png"), webp: require('~/assets/images/berlinLogos/uniPots.png?webp'), alt: "Universität Potsdam"}
            ]

Answer 1

而不是在模板中使用rquire()。像这样使用它：

logos: [
                { path: require('../src/assets/images/berlinLogos/beuthBer.png'), alt: "Beuth Hochschule für Technik Berlin"},

图片路径使用相对路径../。

然后在模板中

  :data-src="logo.path"

如何在 require 中使用模板文字？（要求（`${somePath}`））

How to use template literals in require? (require(`${somePath}`))

javascript

require

node-modules

vue.js

如何在 require 中使用模板文字？ （要求（`${somePath}`））

How to use template literals in require? (require(`${somePath}`))

javascript

require

node-modules

vue.js

如何在 require 中使用模板文字？（要求（`${somePath}`））