初学vue+webpack，要实现一个展示图片的模态框。

// 父组件
<productionModal :content='content' :title='title' :imgUrl='imgUrl' ></productionModal>

<script>
  import productionModal from '@/components/productions/productionModal'

  export default {
    name: 'production', 
    data () {  
      return {  
        transitionName: 'fade',
        content : '内容',
        title : '内容',
        imgUrl : '../../assets/images/production/illustration.jpg'
      }  
    }, 
    components:{ productionModal }
  }
</script>

<template>
  <!--PORTFOLIO IMAGE MODAL LIST-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">{{title}}</h4><!--PORTFOLIO IMAGE TITLE-->
          </div>
          <div class="modal-body">
            <img v-bind:src="imgUrl" class="img-responsive" alt="modal-image"><!--PORTFOLIO MODAL IMAGE-->
          </div>
          <div class="modal-footer">
            <div class="mf-content">
              <p>{{content}}</p>
            </div>                      
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</template>

<script>

export default {
  name: 'productionModal',
  props:  [ 'content', 'title', 'imgUrl' ],
}

</script>

一直报404的错误，应该是webpack没有找到图片。但是直接在子组件中引用，则不报错

<img src="../../assets/images/production/illustration.jpg" class="img-responsive" alt="modal-image">

js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。

解决方案一

如果你是vue-cli初始化的项目，解决的办法：
第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/static的），比如图片放在static//images/production/illustration.jpg
第二步，js中使用/static//images/production/illustration.jpg去引用就行了。

解决方案二

通过require的方式将图片引入

// 父组件
imgUrl : require('../../assets/images/production/illustration.jpg')