Как использовать шаблонные литералы в require? (требуется (`$ {somePath}`)) - PullRequest
Новая
       81

Как использовать шаблонные литералы в require? (требуется (`$ {somePath}`))

0 голосов
/ 08 мая 2020

Я пытаюсь динамически получать пути к изображениям из массива в Vue и отображать лениво загруженное изображение для каждого изображения, используя v-for l oop. Код работает нормально, если я использую шаблонные литералы, однако возвращает cannot find module: '~/assets/path/to/image', когда я использую шаблонные литералы в функции require. Можно ли вообще передать динамические c пути на 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"}
            ]

1 Ответ

1 голос
/ 08 мая 2020

вместо использования rquire() в шаблоне. используйте его так: 

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

используйте относительный путь ../ для пути изображения.

затем в шаблоне 

  :data-src="logo.path"
...