title: Vite / Vue 3 : "require is not defined" when using image source as props
body: <p>I switched from the Vue CLI to <a href="https://vitejs.dev/" rel="noreferrer">Vite CLI</a>, and from the Composition API of Vue 3 to <a href="https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup" rel="noreferrer">SFC Script setup</a> API.</p>
  <h3>How it previously worked for me</h3>
  <p>When I was using the official Vue CLI, I could import an image source by passing the filename of the path by the props :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;img :src=&quot;require(`@/assets/${imagePath}`)&quot;/&gt;
  &lt;template/&gt;
  
  &lt;script&gt;
  export default {
    props: {
      imagePath: { type: String },
    },
    setup() {
      // ...
    }
  }
  &lt;script/&gt;
  </code></pre>
  <p>And then call it like this :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;Image imagePath=&quot;icon.png&quot; /&gt;
  &lt;/template&gt;
  </code></pre>
  <h3>The error I get since I migrated to Vite</h3>
  <p>But since I migrated to the Vite CLI, I have an error &quot;Uncaught ReferenceError: require is not defined&quot;. My file now use the script setup syntax and looks like this :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
  const props = defineProps({
    imagePath: { type: String },
  })
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;img :src=&quot;require(`@/assets/${props.imagePath}`)&quot;/&gt;
  &lt;/template&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6Y5kL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6Y5kL.png" alt="require is not define error" /></a></p>
  <h3>What I tried</h3>
  <p>I already tried to import the file directly from the assets folder with a relative path, and it worked. But I cannot specify the path from props with the import statement.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
  // Works but do not use the props, so the component is not reusable
  import logo from &quot;./../assets/logo.png&quot;
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;img :src=&quot;logo&quot;/&gt;
  &lt;/template&gt;
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
  // Component is reusable but the import statement has illegal argument I guess
  const props = defineProps({
    imagePath: { type: String },
  })
  
  import logo from `./../assets/${props.imagePath}`
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;img :src=&quot;logo&quot;/&gt;
  &lt;/template&gt;
  </code></pre>
  <p>I also tried the import statement in the template but it cannot even compile the code :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
  const props = defineProps({
    imagePath: { type: String },
  })
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;img :src=&quot;import `./../assets/${props.iconPath}`&quot; /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Am I missing something ? Maybe a plugin exists and can help me achieve this ?</p>