如图,使用innerhtml渲染用户发送出的内容,但是头像无法渲染出来,请问该如何处理?
js代码如下
send(){
let text = document.querySelector('#send-text').value;
if(!text){
alert('请输入内容');
return ;
}
let item = document.createElement('div');
item.className = 'item item-right';
item.style='';
item.innerHTML = `
<div class="right-message"
style="background-color: #fefeff;
color: #555;
float: right;
word-wrap: break-word !important;
padding: 8px 10px;
border-radius: 8px 2px 8px 8px;
margin-right: 8px;
max-width: 220px;
font-size: 15px;
line-height: normal;">
<span>${text}</span>
</div>
<div class="avatar">
<img src="@/assets/user.png" alt="user-icon"
style="width: 42px;
height: 42px;
border-radius: 50px;
border: 1.8px solid #cdcdcd;"/>
</div>
`;
document.querySelector('.talk-box').appendChild(item);
document.querySelector('#send-text').value = '';
document.querySelector('#send-text').focus();
//滚动条置底
let height = document.querySelector('.talk-box').scrollHeight;
document.querySelector(".talk-box").scrollTop = height;
console.log("发送出去")
// answer(text)
},
html如下:
<div id="chat-block" style="display: block">
<div class="chat-container">
<div class="chat-header">
<div class="doctor-name">{{doctorList.name}}</div>
<div class="icon-shrink">
<img src="@/assets/shrink.png" alt="shrink-icon" class="shrink" @click="closeTalk()"/>
</div>
</div>
<div class="content">
<div class="talk-box">
<div class="item item-left">
<div class="avatar">
<img src="@/assets/doctor.png" alt="docter-icon"/>
</div>
<div class="left-message">
<span>您好,请详细描述您的问题,我会尽快回复。</span>
</div>
</div>
<div class="item item-right">
</div>
</div>
</div>
<div class="input-area">
<textarea type="text" id="send-text" placeholder="请输入您的问题"></textarea>
<div class="send-block">
<img src="@/assets/send_message.png" alt="icon-send" class="send-button" @click="send()"/>
</div>
</div>
</div>
</div>
请赐教,不胜感激。