学习canvas的时候没有使用单纯的html环境而使用了vue,忽略了webpack对于代码的影响。
<template> <div> <canvas id="tutorial" width="480px" height="650px"></canvas> </div> </template> <script> export default { data() { return {} }, mounted() { this.draw() }, methods: { draw() { var canvas = document.getElementById('tutorial') if (!canvas.getContext) return var ctx = canvas.getContext('2d') var img = new Image() // 1.创建img元素 img.onload = function () { ctx.drawImage(img, 0, 0) } img.src = './abc.png' }, }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello { font-size: 50px; } </style>使用本地图片的时候就渲染不出来，使用网络图片才能成功，就很无解。后来想到在vue中动态改变图片路径时需要引入。
assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖static：在这个目录下文件不会被webpack处理，简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件。将图片作为模块加载进去，比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]这样webpack就能将其解析。 <img @click="back()" :src='topimgs' > import imga from "../components/abc.png"; //在data里替换属性 data() { return { topimgs:imga }; },其实就是受到webpack解析的影响
//替换img.src = './abc.png' img.src = this.topimgs也可以直接使用CommonJs属性直接修改
img.src = require('./abc.png')