vuecli3中img src 的引入问题

最近公司要做一个在线ps 的项目 但是后台没写完, 我在用本地图片上传预览的时候 发现图片不能显示, 解决的办法 是

//页面的结构
  <div class="workspace" >
          <img :src='img'>
  </div>
export default {
  data() {
    return {
      img:require('../../assets/fapiao.jpeg'),
     //这里只能使用require的方式去使用  如果img 是数组, 就用  
     //[require('../../assets/fapiao1.jpeg'),
     //require('../../assets/fapiao2.jpeg'),
     //require('../../assets/fapiao3.jpeg').....]
      fileList: []
    };
  },
}

之前我用了绝对路径和 相对路径 都没有办法实现, 后来查官方文档是因为没有存放静态的asset 文件了 ,静态现在存放在public 的里面. 但是我在public里面去创建一个img 的文件,去放置图片,依然不可以. 所以 三种办法里面 只有require 使用vuecli3 ,
如果大家有好的解决办法 可以一起分享

1、在模板中直接引入图片资源（这种一般是@ 或者./ 去引入）

2、将图片资源放在static文件夹下

3、图片资源在assets文件夹下，data中必须用require加载，否则会当成字符串来处理
(我自己目前就是放在assets 里面. 因为是本地上传的 在做假数据的时候准备做一个预览,或者说以后的默认图片就是它了)
第二种，只要给图片放在static文件夹下即可：原因如下

这里在使用vuecli脚手脚构建工具，目录下会生成一个static目录，表示的是静态目录，推荐大家将img 存放在这个目录下，那么在webpack编译以后，依旧是可以获取到这个目录下的路径，这样就解决了路径不符而导致图片加载不出来的问题！当然项目中用的一般都是绝对路径，少数图片的话，这种方式挺好
但是 重点: vuecli3 没有static 啊!!!

=======补充

 <ul>
          <li v-for="(item,index) in src" :key="index" @click="jump">
            <img :src="item" alt>
          </li>
 </ul>

export default {
  data() {
    return {
      centerDialogVisible: false,
      form: {
        LoginName: "",
        PassWord: ""
      },
      rules: {
        LoginName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        PassWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      message: "",
      src: [
        require("../assets/imgs/001.jpg"),
        require("../assets/imgs/002.jpg"),
        require("../assets/imgs/003.jpg"),
        require("../assets/imgs/004.jpg"),
        require("../assets/imgs/005.jpg")
      ]
    };
  },

完美的动态绑定, Gong智障继续加油 哈哈哈哈~!!!

再这个页面上接着补充一个 如果router-link 去页面跳转的怎么加配置

  <ul>
          <li v-for="(item,index) in src" :key="index" @click="jump(item.address)" :plain="true">
            <img :src="item.img" alt>
          </li>
     
   </ul>

export default {
 data() {
   return {
     centerDialogVisible: false,
     src: [
       { img: require("../assets/imgs/001.jpg"), address: "taxplayerinfo" },
       { img: require("../assets/imgs/002.jpg"), address: "taxsheet" },
       { img: require("../assets/imgs/003.jpg"), address: "search" },
       { img: require("../assets/imgs/004.jpg"), address: "home" }
     ]
   };
 },
 methods: {
  jump(address) {
     this.$router.push({ name: address });
   }
 }
};