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

迈不过友情╰ 2021-09-18 01:46 408阅读 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 条评论，408人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue中图片src动态拼接

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

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

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

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

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

相关 Vue.js项目中,当图片无法显示时则显示默认图片

最近在学习Vue时，遇到了一个问题，就是从后台传过来的图片路径无效时，需要在页面显示默认图片本人试了3种方法，2种方法失败了失败方法一：见[http://blog.

逃离我推掉我的手/ 2022年06月17日 02:24/ 0 赞/ 299 阅读

相关 DOM动态创建标记

所谓动态创建标记，就是说向页面中添加本来没有的内容。比如下面这段简单的代码： <!doctype html> <html lang="lang"> <

Bertha 。/ 2022年06月07日 01:48/ 0 赞/ 233 阅读

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

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

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

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

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

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