Vue中读取Firestore get()返回数据时换行失效、URL无法转图片如何解决

问题原因 #

1. 双大括号{{ }}插值会将内容解析为纯文本，文本中的\n换行符在HTML默认规则下不会被渲染为换行，仅会被识别为普通空格
2. 直接将图片URL作为文本插入模板不会自动生成图片标签，需要显式使用<img>元素绑定资源地址

解决方法 #

1. 还原content换行格式 #

优先推荐CSS方案，无安全风险，无需修改原数据：
给渲染content的标签添加white-space: pre-wrap样式，即可保留文本中的换行与空格：

<p style="white-space: pre-wrap">{{ content }} {{ url }}</p>

如果确实需要将换行转换为<br>标签渲染，可以先对content做转义处理，再用v-html指令渲染：

注意：如果content是用户提交的不可信内容，使用v-html存在XSS注入风险，仅当内容完全可控时使用该方案

// 逻辑层处理content
content.value = doc.data().content.replaceAll('\n', '<br>')

<!-- 模板层用v-html渲染 -->
<p v-html="content"></p>

2. 将URL转换为图片展示 #

单独使用<img>标签绑定src属性即可，建议添加判断避免URL为空时出现异常：

<p style="white-space: pre-wrap">
  {{ content }}
  <img v-if="url" :src="url" alt="内容图片" style="max-width: 100%; margin-top: 8px;">
</p>

补充优化建议 #

原获取数据的逻辑可以添加存在判断和异常捕获，避免文档不存在或请求失败时报错：

onMounted(async () => {    
  try {
    const forminfo = db.collection('forms').doc(route.params.id)
    const doc = await forminfo.get()
    if (doc.exists) {
      content.value = doc.data().content
      url.value = doc.data().url
    } else {
      console.log('文档不存在')
    }
  } catch (err) {
    console.error('获取文档失败：', err)
  }
})

内容的提问来源于stack exchange，提问作者mozi