javascript - vue里面V-bind src 通过函数计算src，怎么让他引入的文件也可以自动被打包到dist里面？

Question

静态 SRC的时候 {代码...} 后来 改成了这种 src是被计算出来的时候 {代码...} 问题就来了。。 没有 被处理。。。。 求大神解惑，怎么解决这种问题，除了 改成class backgroundImage的形式 因为这里的图片需要自己...

黄舟 · Answer

你所要赋值的 Vue 实例数据中的图片不是图片地址，而应该是一个模块，可以使用 import 或者 require 引入。

另外，如果你是 vue-cli 使用 webpack 项目模板创建的项目，将要绑定的图片放到项目的 /static 目录下，并且在 Vue 实例数据中指定为 /static 目录下的图片地址也可以。

参见：学习 Vue 你需要知道的 webpack 知识（一）2.动态加载固定图片

怪我咯 · Answer

webpack 中对图片打包一般配置如下：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: /assets\/icons/,
  query: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}

而你引入的路径是 ../../../static，是 src 的同级目录么？如是的话，是不参与webpack 打包的；可讲图片放置在 src/assets/img 之下即可。

ringa_lee · Answer

webpack是代码运行前打包，v-bind是运行时进行处理，二者不一样的。可以在当前文件中提前把两个图片都引用进来，进行选择展示。
也就是geturl 返回的是require(图片地址)而不是一个相对路径