vue 方法中js动态创建dom，拼接元素图片不显示

 var ob = '
';
                
       for (var j = 0;j < this.deviceDetailArray.length;j++) {
            if(this.deviceDetailArray[j].kinds == 1){
                ob += '
';
                ob += this.deviceDetailArray[j].name+'
';
            } else if(this.deviceDetailArray[j].kinds == 2) {
                ob += '
';
                ob += this.deviceDetailArray[j].name+'
';
            } else {
                ob+= '
暂无数据
';
            }
       }
   ob+='
';
   console.log(ob);

拼成的dom元素

     

         OA系统应用
     
     

         OA系统数据库
     
     

         sql系统数据库
     

图片无法显示！

这个坑主要是理解，当前方法中自己拼的这段dom节点，是不会走webpack打包去变路径，所以写的asset目录，出来的是原来那个名称，拼的什么就还是什么，但是如果你是走templete或者require，他会在webpack打包阶段，他会帮你来处理这个路径的变换，他会把对应的assets里的内容拷贝到最后的dist目录里，同时把你的路径修正成正确的路径。

for (var j = 0;j < this.deviceDetailArray.length;j++) {
                    if(this.deviceDetailArray[j].kinds == 1){
                        ob += '
';
                        ob += this.deviceDetailArray[j].name+'
';
                    } else if(this.deviceDetailArray[j].kinds == 2) {
                        ob += '
';
                        ob += this.deviceDetailArray[j].name+'
';
                    } else {
                        ob+= '
暂无数据
';
                    }
                }
                ob+='';
                console.log(ob);

通过require来加载图片，才会走webpack那一套