请问vue3使用innerhtml，照片渲染不出来，该怎么处理？

如图，使用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>

请赐教，不胜感激。

用require引入

<img :src="require('@/assets/send_message.png')" />

你把数据用数组整理起来，然后再循环item-right

<div class="item item-right" v-for>
 
              </div>

@在config中配置了吗。
vue尽量不要操作dom了，用数据驱动视图的思想。

                           <img src="@/assets/user.png" alt="user-icon"

                                style="width: 42px;

                                        height: 42px;

                                        border-radius: 50px;

                                        border: 1.8px solid #cdcdcd;"/>

                        </div>

（1）图片路径正确吗，（2）因为看到你图片既设置了width，又设置了height，可能导致图片失真【width或height保留一个就可以了】

图片渲染不出来基本上是图片路径问题，你查看渲染以后的图片路径是否正确

图片路径问题，@可能没配置，改成相对路径试下