webpack require, how to pass a string variable?

Question

In Vue, I'm trying to pass a string into require(), the first option works (passing the string directly). however when passing the variable containing the string the loading fails, any clues???

<template>
    <img :src="require('@/assets/channels/email.png')" />
//   <img :src="require(test)" />
</template>

export default {
  data() {
    return {
      test: "@/assets/channels/email.png"
    };
  }
}

Possible duplicate of Using require('...') with a variable vs. using a string in webpack — CDT
– CDT, Commented Apr 17, 2019 at 9:16

Aldarund · Accepted Answer · 2018-07-08 12:28:11Z

0

Maximum you could is a require with expression, with full variable it wont work. See docs here

<template>
    <img :src="require('@/assets/channels/'+test+'.png')" />
</template>

export default {
  data() {
    return {
      test: "email"
    };
  }
}

answered Jul 8, 2018 at 12:28

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yaniv Peretz Over a year ago

Mmm... care to fix typo / explain why it won't work?

Collectives™ on Stack Overflow

webpack require, how to pass a string variable?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related