vu-element-ui img src 路径为assets 时加载动态图片失效的多种情况分析

项目需要基于当前天气类别,显示对应的天气符号,为img的src属性绑定,其中图片放在目录assets下,发现以下几种情况

1)在代码中require必须用computed而不是method

如下图,在method getIcon1中,为src 绑定 method getIcon1,getIcon1通过require引入图片,测试无法获取图片

解决方法   是将method 变为computed计算属性,可以获取成功(既可以用相对路径也可以用绝对路径)

 

2)通过data引入时,必须在data中先require进来

可以看到方法2相对来说代码增多,而且一旦图片增多,维护也比较困难,所以对于assets下的图片需要动态引入,还是在计算属性中通过require调用。

特别说明:如果图片不是放在assets目录下,而是其它路径,则可以不遵守步骤1,可以直接在方法中require,是没有问题的,如下图所示。