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>