vue项目中，我们一般使用v-html指令解析富文本，方便快捷，着实好用。但是，今天我遇到了一个小问题，如标题所示，问题很简单，看你怎么解决了。
网上搜了一下，大致是这么说的，因为安全原因，这些网络图片被设置了访问限制，解决方案就是：
在所在页面的head中加入：<meta name="referrer" content="no-referrer">
一针见效，立竿见影！
那么这个referrer是个什么东东？我简单了解了一下。
什么是referrer ？
referrer有“引用页面”或“来源页面”的意思，用来指定当前页面是从哪个页面跳转过来的，也就是说HTTP请求报头中的referrer包含了跳转至当前页面的上一个页面的url地址；
比如，你点击A页面中链接到B页面的URL地址，当你从浏览器进入B页面时，会向服务器发送请求，在这个请求的报头中会带上一个referrer，包含了A页面的URL地址；
referrer的作用
referrer可以告诉你用户是从哪个页面url地址过来的，这样就可以用来统计用户的来源，还可以用于分析用户的兴趣爱好、收集日志、优化缓存等等。
如果禁止referrer，可以防止盗链，或也可以绕过防盗链，也能防范一些攻击。
referrer的隐患
如果网页中，由于涉及隐私和安全问题，防止 referrer 泄漏就显得很重要了。
比如，很多情况下我们的url会包含用户的个人信息。因此，有时候，我们需要移除或禁用页面上的referer信息
再比如，在后台中使用了referer属性，会导致js和php的一些跳转出现问题，同时，也很有可能会导致一些第三方的统计代码失效，比如cnzz，百度统计，解决方法是不用该属性，或者使用iframe包裹一层，用一个独立的html页面加载统计代码！
referrer属性写法
在html页面中的<head>头部区域用meta标签添加referrer属性
<meta name="referrer" content="属性值">
content后面的“属性值”，常见有以下几种：
no-referrer：任何情况下都不发送Referrer信息；
no-referrer-when-downgrade：仅当协议降级（如从HTTPS页面跳转到HTTP页面）时不发送Referrer信息。是大部分浏览器默认策略。
origin：发送只包含host部分的referrer信息，也就是只包含了协议和域名的url，不包含域名后面部分，比如，来源网页url是https://liudaima.com/1.html，但referrer值只包含http://www.liudaima.com；
origin-when-cross-origin：仅在发生跨域访问时，发送只包含host的Referer信息，但在同域下还是完整的，而只有协议、域名和端口都一致时，浏览器才认为是同域。
unsafe-url：全部都发送Referrer信息，是最宽松，也是最不安全的策略
温馨提示：
1、referrer属性的<meta> 标签需要放在 <head> ...</head> 之间，如果出现的位置不对就会被忽略。
2、如果没有content 属性，或者 content 属性值为空，也会被忽略。
3、如果 content 属性后面的取值不合法，浏览器会自动选择 no-referrer 。
referrer属性用法
在html网页文档中，有两种方式，可以添加发送请求的referrer信息，分别是<meta>标签法和单个连接标签法。
1、<meta>标签法（针对整个页面）
这种方法是针对属于当前网页中的所有链接，从任何一个链接跳转到其他页面，都会带上referrer信息。
如果想要在任何情况下，当前页面发送的请求不携带referrer信息，就这样写：
<meta name="referrer" content="no-referrer">
如果想要在任何情况下，当前页面发送的请求包含referrer信息，就这样写：
<meta name="referrer" content="unsafe-url">
这种情况下，如果当前页面使用了 https 协议，而要加载的资源使用的是 http 协议，加载资源的请求头中也会携带 referer。
2、单个链接标签法
这种方法可以只针对网页中具体的某一个或多个链接单独设置referrer，常常运用在<a>、<img>、<area>、<iframe>、<link>标签上。
<a rel="no-referrer" href="http://www.liudaima.com" />刘代码博客</a>
<img rel="no-referrer" src="logo.png" />
值得注意的是：
这种单个链接标签法，只对该标签中链接有效，且referrer的属性值，只有三个，分别是：no-referrer、origin、unsafe-url；而且，单个链接标签法设置referrer的优先级比<meta>标签法要高。
另外，<a>、<area>、<link>标签中的单个链接，还可以使用rel="noreferrer"属性达到和no-referrer同样的效果，写法如下：
<a rel="noreferrer" href="http://www.liudaima.com" />刘代码博客</a>
同样的，该方法使用rel="noreferrer"属性设置referrer的优先级比标签法要高。
关于v-html渲染富文本，还有一个小问题，就是文字换行。
使用v-html渲染文字内容时，当文字内容很长时，无法自动换行时，可以加上word-wrap: break-word;，
这个属性的主要作用就是词语内断句，这里的断句其实主要是针对长英语单词，但是中文就无所谓了。
除此以外，还有word-break属性，设置为word-wrap：break-word;，解决长单词自动换行的问题，也就是说，遇到长单词，不会自动换行，而是继续显示，知道尽头再换行。
记录这个，主要是因为，之前在用v-html渲染中文文章的时候，遇到有换行时，并不会自动换行，加上word-wrap: break-word;后就好了，遇到过这个问题的同学也可以试试。
还有一种情况：
el-input 控件在使用过程中，输入时按下回车键会自动在文本中加入 \n ，然后传输给后端.
我们要做的就是将这段文字转变成换行显示的格式，css 提供了 style="white-space: pre-line"
<el-table :data="list" >
<el-table-column label="回复内容" align="center">
<template slot-scope="scope">
<span style="white-space: pre-line" v-html="scope.row.replyMessage"></span>
</template>
</el-table-column>
</el-table>
