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

Question

静态 SRC的时候

           <p class="news-area__item">
             <img src="../../../static/img/news_item.png">
             <p class="news-area__item__box">
               <img src="../../../static/img/news_item_illegal.png">
             </p>
             <p class="news-item__title">
               <span>盗版情报 </span>
                <span>2017-3-28 14：56：34</span>
             </p>
           </p>
           
           这样静态的写在 <template>里面  导出来的就是
          

后来 改成了这种

src是被计算出来的时候

   <p class="news-area__item">
                 <img src="../../../static/img/news_item.png">
                 <p class="news-area__item__box">
                 
                 
                     <img :src="generageUrl(item)">
                     // 这里是 src是计算出来的。。。
                     
                     
                 </p>
                 <p class="news-item__title">
                   <span>盗版情报 </span>
                   <span>2017-3-28 14：56：34</span>
                 </p>

问题就来了。。

没有 被处理。。。。

求大神解惑，怎么解决这种问题，除了 改成class backgroundImage的形式 因为这里的图片需要自己适应，backgroundImage 不太灵活

Answer 1

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

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

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

Answer 2

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 之下即可。

Answer 3

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