初學(xué)vue+webpack，要實現(xiàn)一個展示圖片的模態(tài)框。

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

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

  export default {
    name: 'production', 
    data () {  
      return {  
        transitionName: 'fade',
        content : '內(nèi)容',
        title : '內(nèi)容',
        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的錯誤，應(yīng)該是webpack沒有找到圖片。但是直接在子組件中引用，則不報錯

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

js動態(tài)生成的路徑無法被url-loader解析到，如果你去build，會發(fā)現(xiàn)圖片甚至不會打包輸出到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')