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

Question

I am trying to dynamically get paths to images from an Array in Vue and display a lazyloaded image for each image using a v-for loop. The Code works fine if I use template literals, however returns cannot find module: '~/assets/path/to/image' when I use template literals in the require function. Is it even possible to pass dynamic paths to require? Is this a Vue or JS related issue?

Here is an example:

<!-- 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"}
            ]

This works:

      <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>

Thank you in advance!

EDIT:

My final solution:

      <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"}
            ]

score 1 · Accepted Answer · answered May 08 '20 at 07:46

1

instead of usingrquire() in the template. use it like so:

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

use relative path ../ for the image path.

then in the template

  :data-src="logo.path"

answered May 08 '20 at 07:46

Hank X

1,988
2
14
32

Just worked that out myself. Works with `~` in the path as well. Any idea why this works and the first approach does not? – aside May 08 '20 at 07:51
1

check this post https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules – Hank X May 08 '20 at 07:55

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

1 Answers1

Linked