As follows:

<template>
  <img :src="img" alt="">
</template>
export default {
  data () {
   img: './logo.png'}}Copy the code

There are two ways to solve this problem, and I’ll explain the reasons for this at the end

The solution

First: import images directly

<template>
  <img :src="img" alt="">
</template>
import img from './logo.png'
export default {
  data () {
   img
  }
}
Copy the code

The second way to avoid this problem is to place the image in the static resource directory (i.e. the static folder) and introduce a relative path

Well, said the solution, take a look at the causes of this situation, but first, let me know Below two folders assets: generally we will pictures, fonts icon into the folder, in the process of compilation of the project, the folder will be webpack processing into module dependencies, only supports the relative path. Build time resolved by Webpack to module dependencies.

Static: This folder usually contains static resources (third-party files). The files in this directory are not processed by Webpack and will not be parsed by WebPack. They will be placed directly under the final package directory, usually dist/static without any changes. References to these files, so you must use a relative path here is through the config. The js files in the build. AssetsPublic and build assertsSubDirectory link to determine. Any file placed under static/ needs to be imported as a relative path.

Due to the characteristics of Webpack, files placed under static are static resources that never change, and results may change with results

To summarize the reason: in the case of dynamic loading, Webpack will use the image as a module, so urL-loader cannot resolve the relative path of the image, resulting in path loss and no image display.