webpack打包靜態資源和動態資源

1.對於靜態引用的資源：

<img src = "static/modelname/imgname.png">
// 修改為下面的寫法
<img src = "../../../static/modelname/imgname.png">

 

2.不准在內聯內顯試的引用圖片

// 禁止出現下面寫法
<div style = "background: src(...)"></div>

 

3.動態引用的圖片

<img ref = 'test'></img>
this.$refs.test.src = require('../../static/httpdemo/111.png')

<div ref = 'test'></div>
this.$refs.test.style.background = 'url(' + require('../../static/httpdemo/111.png') + ')'

// webpack會將../../../static/httpdemo/下所有圖片打包。
<img :src = "require('../../../static/httpdemo/' + id)" v-show="id"></img>
<div :style = "'background: src(' + require('../../../httpdemo' + id) + ')'"></div>

 

<template>
  <div>
    <zy-header :headerTitle="$route.meta.title" :rightShow="true"></zy-header>
    <div class="container">
      // 通過:src設置圖片路徑
      // 如果在頁面初始化時或者在操作過程中將imgName值賦為''，這時頁面會顯示找不到圖片，最好加上v-show。
      <img ref="test" class="test" :src="img" v-show="imgName"></img>
      // 通過:style設置背景圖路徑
      <div class="test" :style="backgroundimg"></div>
    </div>
  </div>
</template>

<script>
  import ZyHeader from '../../components/ZyHeader'
  export default {
    data () {
      return {
        imgName: '111.png',    // 圖片名初始化，后面通過修改imgName的值動態更換圖片
        bgImgName: '111.png'   // 背景圖初始化
      }
    },
    components: {
      ZyHeader
    },
    computed: {
      // 圖片
      img () {
        return this.imgName ? require('../../../static/httpdemo/' + this.imgName) : ''
      },
      // 背景圖
      backgroundimg () {
        return this.imgName ? {
          backgroundImage: 'url(' + require('../../../static/httpdemo/' + this.bgImgName) + ')',
          backgroundRepeat: 'no-repeat',
          backgroundSize: '25px auto'
        } : {}
      }
    }
  }
</script>
<style scoped>
  .test{
    width:100px;
    height:100px;
  }
</style>