初學(xué)vue+webpack喂很，要實(shí)現(xiàn)一個(gè)展示圖片的模態(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">×</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>
一直報(bào)404的錯(cuò)誤糊饱，應(yīng)該是webpack沒(méi)有找到圖片。但是直接在子組件中引用督禽，則不報(bào)錯(cuò)
<img src="../../assets/images/production/illustration.jpg" class="img-responsive" alt="modal-image">
js動(dòng)態(tài)生成的路徑無(wú)法被url-loader解析到脆霎，如果你去build，會(huì)發(fā)現(xiàn)圖片甚至不會(huì)打包輸出到dist目錄（webpack是按需打包的）狈惫。
解決方案一
如果你是vue-cli初始化的項(xiàng)目睛蛛，解決的辦法：
第一步，把圖片放到src同級(jí)的static目錄（build/build.js文件中有一段代碼是把static目錄拷貝到dist/static的）虱岂，比如圖片放在static//images/production/illustration.jpg
第二步玖院，js中使用/static//images/production/illustration.jpg去引用就行了。
解決方案二
通過(guò)require的方式將圖片引入
// 父組件
imgUrl : require('../../assets/images/production/illustration.jpg')
