vue中动态加载图片报错

动态加载或进行逻辑 *** 作显示的，直接放static文件下可以避免404报错

原因：

assets: 在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”/logopng”>和background:url(/logopng),”/logopng”是相对资源路径，将被webpack解析为模块依赖

static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。它会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过configjs文件中的buildassetsPublic和buildassertsSubDirectory链接来确定的。

自定义指令是用来 *** 作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM *** 作，并且是可复用的。比如谷歌的加载做得非常优雅，在未完成加载前，用随机的背景色占位，加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。

最近接到项目经理的一个需求，要求将h5页面生成，用户点击在屏幕的时候能够将保存到本地，所以就很机智的用了html2canvas这个插件。自以为很完美的实现了这个功能，结果测试小哥在页面加载的时候上下拉动了一下页面，绘制出来的面目全非。立马去百度了一下，原来html2canvas在获取到dom元素之后才开始渲染。因此在页面开始加载时候，禁止页面的上下拉动便可以让html2canvas安安静静的绘图了。好了，开始踩坑吧。。。

方法一：
使用原生js *** 作dom的方法，来改变css的样式，比如
documentgetElementById(id)styleproperty =newstyle
这里的new style 里面就可以使用js传入的变量。
此方法固然可以，但是对应改变一些复杂的css，比如动画什么的， *** 作起来就不怎么方便了。此时，如下的方法二就显得尤为重要了！
方法二：
利用css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使用css变量。如下图所示，我们传入year变量，然后生成了--top、--bottom等变量，然后这些变量就可以在css中使用！

1、检查是否存在；
2、检查引入方式是否正确 import或者require引入
3、编码后太大，超过默认设置，需要在 webpackbaseconfjs文件中修改限制。

---