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

 var ob = '<ul class="layer_notice">';
                
       for (var j = 0;j < this.deviceDetailArray.length;j++) {
            if(this.deviceDetailArray[j].kinds == 1){
                ob += '<li><img src="/static/App.png"/><span>';
                ob += this.deviceDetailArray[j].name+'</span></li>';
            } else if(this.deviceDetailArray[j].kinds == 2) {
                ob += '<li><img src="../assets/DB.png"/><span>';
                ob += this.deviceDetailArray[j].name+'</span></li>';
            } else {
                ob+= '<li>暂无数据</li>';
            }
       }
   ob+='</ul>';
   console.log(ob);

拼成的dom元素

<ul class="layer_notice">
     <li>
         <img src="../assets/App.png" /><span>OA系统应用</span>
     </li>
     <li>
         <img src="../assets/DB.png" /><span>OA系统数据库</span>
     </li>
     <li>
         <img src="../assets/DB.png" /><span>sql系统数据库</span>
     </li>
</ul>

图片无法显示！

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

for (var j = 0;j < this.deviceDetailArray.length;j++) {
                    if(this.deviceDetailArray[j].kinds == 1){
                        ob += '<li><img src="'+require("../assets/App.png")+'"/><span>';
                        ob += this.deviceDetailArray[j].name+'</span></li>';
                    } else if(this.deviceDetailArray[j].kinds == 2) {
                        ob += '<li><img src="'+require("../assets/DB.png")+'"/><span>';
                        ob += this.deviceDetailArray[j].name+'</span></li>';
                    } else {
                        ob+= '<li>暂无数据</li>';
                    }
                }
                ob+='</ul>';
                console.log(ob);

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