解决vue-cli中webpack无法打包js变量中的图片路径 ( js引用图片 )

方法

JS调用时直接使用require调取路径。

require("@/static/pic/test.png")

示例

<template>
    <div id="app">
        {{ src }} <img :src="src" alt="暂时无法显示图片" /> <HelloWorld />
    </div>
</template>
<script>
    const src = require("./assets/demo.jpg");
    export default { name: "App", data: () => ({ src }) };
</script>

这就是所谓的CommonJS风格，还有一种解决方案，使用ES6的import函数，同样可以解决这个问题。

<template>
  <div id="app">
    {{src}}
    <img :src="src" alt="暂时无法显示图片">
  </div>
</template>

<script>
  let srcLoad = () => import('./assets/demo.jpg');
  export default {
    name: 'App',
    data: () => ({
      src: ''
    }),
    created () {
      console.log(srcLoad)
//      ƒ srcLoad() {
//        return __webpack_require__.e/* import() */(1).then(__webpack_require__.bind(null, "./src/assets/demo.jpg"));
//      }
      srcLoad().then( i => {
        this.src = i
      })
    }
  }
</script>

ES6的Import不仅可以进行模块的导入导出，还可以引入一个资源，该函数返回的是一个Promise对象，在then方法中可以获得资源的路径。另外一个就是import只能引入静态资源，不能进行JS字符串的拼接。我们基于require的语法继续扩展一下，大家可以尝试配置一个json-loader,把所以需要JS变量引入的图片路径全部配置到里面去，然后通过require()动态的获取。

补充：webpack采用的是CommonJS语法，从这个console打印的内容确实可以看出。

原文链接：https://blog.csdn.net/brave_coder/article/details/79533757