Vue don't load dynamic src and require doesn't work

Question

I have a problem, I want to show a dynamic img but if i write like this :
<img :src="src" alt="img"> It doesn't work,

instead it works if i do : <img src="../assets/img/banana.png" alt="img">

I've already tried whit require but it returns an error : Error: Cannot find module '../assets/img/banana.png'"

import the images, https://stackoverflow.com/questions/51963030/parcel-js-vue-dynamic-images-src/58712521#58712521 — Lawrence Cherone, Aug 03 '20 at 16:55
maybe your path is wrong.. https://codesandbox.io/s/mystifying-bird-9py2v?file=/src/App.vue — Lawrence Cherone, Aug 03 '20 at 17:05
actually I just checked and `*` doesn't seem to work with vue-cli :( must be a parceljs thing :) I just checked and `` works fine. — Lawrence Cherone, Aug 03 '20 at 17:15
it doesn't work https://codesandbox.io/s/thirsty-shape-2y4zp?file=/src/components/HelloWorld.vue — folipso, Aug 03 '20 at 17:20
summing is up with codesandbox, getting *Error in render: "Error: /src/assets/pokedex.png hasn't been transpiled yet."* which after like 2mins goes away, also is not working in ./img folder but works fine up one folder which is sucky, dunno, your paths are good, use `:src="require(test.img)"` like the example above and sometimes it works ;p — Lawrence Cherone, Aug 03 '20 at 17:57
is working now (no changes).. https://codesandbox.io/s/dry-dawn-rj4yz?file=/src/data/projects.js — Lawrence Cherone, Aug 03 '20 at 18:04

Ricky Ruiz · Accepted Answer · 2020-08-03T18:07:05.327

The problem is that there is no information about where the module is located and webpack cannot resolve it.

It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.

The import() must contain at least some information about where the module is located.

To fix this, you can create a BaseImage component that replaces the dynamic sources that start with a certain path, in this case ../assets/, and let webpack know that information beforehand.

ie.

<template>
  <img
    :src="computedSrc"
    :alt="alt"
    class="BaseImage"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
export default {
  name: 'BaseImage',

  inheritAttrs: false,

  props: {
    src: {
      type: String,
      required: true,
    },

    /**
     * The alt tag is required for accessibility and SEO purposes.
     *
     * If it is a decorative image, which is purely there for design reasons,
     * consider moving it to CSS or using an empty alt tag.
     */
    alt: {
      type: String,
      required: true,
    },
  },

  computed: {
    // If the URL starts with ../assets/, it will be interpreted as a module request.
    isModuleRequest() {
      return this.src.startsWith('../assets/')
    },

    computedSrc() {
      // If it is a module request,
      // the exact module is not known on compile time,
      // so an expression is used in the request to create a context.
      return this.isModuleRequest
        ? require(`../assets/${this.src.replace('../assets/', '')}`)
        : this.src
    },
  },
}
</script>

Replace img with the BaseImage component.

<!-- <img :src="img.src"  :alt="img.alt"> -->
<BaseImage :src="img.src" :alt="img.alt"/>

Vue don't load dynamic src and require doesn't work

1 Answers1

Revised codesandbox