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

迈不过友情╰ 2021-09-18 01:46 459阅读 0赞

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那一套

发表评论取消回复

表情：

评论列表（有 0 条评论，459人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue2.0中动态拼接图片路径

本地资源图片路径我们用require的方法解决外部资源（来自服务器的图片）我们如果使用以下方式则无法找到对应图片，会把变量当成字符直接处理 <div class=

雨点打透心脏的1/2处/ 2024年04月07日 11:30/ 0 赞/ 105 阅读

相关 Vue中动态（import 、require）显示img图片

vue中，经常会遇到显示图片的问题，如果是一个普通组件的话，那么这样就可以了 <img src="../assets/images/avtor.jpg" widt

朴灿烈づ我的快乐病毒、/ 2023年08月17日 17:02/ 0 赞/ 147 阅读

相关 vue标签内动态渲染数据（DOM字符串拼接方法）

<div class="newsImg" :style="' background-image: url('+newsImg+')'"></div>

忘是亡心i/ 2023年08月17日 15:32/ 0 赞/ 152 阅读

相关 vue中获取dom元素

最近在项目中要用到拦截器，坦白说是第一次听说这玩意，所以资料查了好久，现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应，然后进行相应的处理。比如一些网站过了一

末蓝、/ 2023年06月13日 06:08/ 0 赞/ 24 阅读

相关 js vue 动态拼接变量名 js动态变量名循环拼接变量名

let obj = { } for (let index = 0; index < 3; index++) { obj['name'+inde

冷不防/ 2022年12月28日 07:14/ 0 赞/ 313 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 362 阅读

相关 vue中图片src动态拼接

有时我们需要动态拼接图片的路径，可以使用下面的方式 <img :src="getImgUrl(item)" v-for="(item, index) in array

桃扇骨/ 2022年11月14日 10:26/ 0 赞/ 440 阅读

相关 js动态给dom元素添加类名

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年09月07日 09:38/ 0 赞/ 362 阅读

相关 vue获取dom元素高度的方法

获取高度： <div ref="自定义名称" > </div> 要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式

男娘i/ 2021年09月30日 11:02/ 0 赞/ 2032 阅读

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

var ob = '<ul class="layer_notice">'; for (var j = 0

迈不过友情╰/ 2021年09月18日 01:46/ 0 赞/ 460 阅读