时间戳

首页 > 解决方案 > 嵌入的推文无法在 vue 中正确显示

html - 嵌入的推文无法在 vue 中正确显示

问题描述

我使用 django 作为我的后端和 vue 前端。我有一个带有richtexteditor的模型，在我的保存方法中，它将推文链接转换为嵌入的html推文，我不认为这部分很重要，只是认为我需要提供一些关于我的问题的前言. 所以在 vue 中，我有一个将 v-html 设置为模型内容的 div。div 的内容与我保存的所有其他内容相匹配，但推文无法正确显示。推文的内容在没有容器、个人资料图像等的情况下显示。

我尝试在 chrome 的检查工具中复制嵌入的推文 html 并使用 w3schools tryit 编辑器，并且它正确加载

嵌入推文的 HTML：

<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">Thank you all for replying to our tweets. I think I’ll do just one more for the night... I have to go to prepare for tomorrow’s festivities! .</p>&mdash; AMNotify (@AMNotify) <a href="https://twitter.com/AMNotify/status/1171218606371332101?ref_src=twsrc%5Etfw">September 10, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</p><p>&nbsp;</p><p>&nbsp;</p>

它是如何显示的：

感谢大家回复我们的推文。我想我晚上再做一个……我得去准备明天的庆祝活动了！.

— AMNotify (@AMNotify) 2019 年 9 月 10 日

 

 

应该如何显示： https ://jsfiddle.net/z7wgLqcb/

标签： htmlvue.js

解决方案

已解决，需要添加<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>到 index.html

推荐阅读