Require is not a function in vue-cli project while rendering using template attribute

CraZyCoDer 0
Viewed 33

I'm new to Vue js (I'm using vue3) and I've detected a bit weird behavior at my Component while image rendering

I have a project with 2 endpoints Home.vue and InitializationModal.vue

The Problem is, that while rendering the InitializationModal.vue component, the vue does not determine the require as a function for some reason (I put the template into the template attribute of the component, not into the separated tag)

I have the same template at Home.vue (but it is in separated template tag), however it works perfect.

What's wrong with it?

To better explain the problem, there is some snippets provided down below

I've cut it as much as it possible to make it easier to understand

Snippet of the Home.vue (that is in separated tag)

<template>
    <div v-else class="empty flex flex-column">
      <img :src="require('@/assets/illustration-empty.svg')" style="width: 50%; height: 50%; margin" alt="illustration-empty" />
      <h3>There is nothing here</h3>
      <p>Let's create a new Virtual Server Now!</p>
    </div>
  </div>

</template>


<script> 

...// my component goes there 

</script>

InitializationModal.vue


<script>

export default {

  name: "hardwareConfiguration",
  template: `
      <div class="hardwareConfiguration flex flex-column">
        <h4>Hardware Configuration</h4>

            <v-select :options="Datacenters" @input="validateDatacenter" label="title">
                <template slot="Datacenter" slot-scope="Datacenter">
                    <img :src="require('@/assets/some_image.svg')" style="height: 20%; width: 20%" />
                    {{ Datacenter.DatacenterName }}
                </template>
            </v-select>
  `,
};

</script>

the Error that is being returned at the InitializationModal.vue : Uncaught (in promise) TypeError: require is not a function

vue.js
1 Answers

Using require( like this is not really Vue, it's Webpack which reads your require method, transforms the path to an absolute path which the browser understands (or possibly a base64 encoded string, depending on url-loader settings). The problem is webpack will only transform Javascript, not the full string of your template property. Maybe try like this:

`<img :src="${require('@/assets/some_image.svg')}" style="height: 20%; width: 20%" />`

or just use regular SFC template syntax.

userqDhy0
Related