[Solution] VUE.js Load a local image with parameters in the script

Basic knowledge:
1, VUE.js When loading the local image path in the script, you need to use require, but not in the HTML tag;
2, VUE.js In principle, it is not supported to load the local image path containing parameters. Even if require is used, an error will still be reported because require.js
and
respectively 3. In many cases, we need to take data from the database and compile it, including pictures. In general, in addition to the URL of the network image and the binary image, it may also contain the local image path.

Specific operation:

<template>
  <img :src="imgA"/>
</template>

<script>
export default {
  computed: {
    the name of your function (optional parameter) {
      return require('local folder within some project (aka root)' + arguments)
    }
  },
  methods: {
    your function name2 (optional parameter2) {
      this.imgA = your function name (optional parameter)
    }
  }
}
</script>

Several key points:
1. Functions must be stored in computed, which is a dynamic calculation block. Unlike methods, require contains dynamic parameters and will not report errors;
2 2. A root directory must be provided, and the following parts can be played as you like. The root directory is necessary. During the operation, it will actually get all the files under the root directory, and then find what you need;
3. When calling, assign the function name (optional parameter) of this. You to the image path parameter (IMGA in this example).

If there is any unclear description, please leave a message.


Read More: