react设置img标签url网络地址不显示

简介: react设置img标签url网络地址不显示

问题


学习React Web页面开发的过程中,遇到了一个问题设置img标签的图片地址,没有任何显示,但是换另外一个图片地址就可以展示,但是通过浏览器直接访问图片地址是没有问题的,有点纳闷,就查阅了一下资料。

通过学习了解调,src设置网络图片无法展示,是因为浏览器在访问图片地址时会自动在请求上添加了refre字段,而有些网站服务器针对refre做了防盗链设计就返回了403,自然就无法展示。

解决方案


解决方案也很简单, 在react项目的public路径下,找到index.html文件,在head标签中添加如下代码即可

<meta name="referrer" content="no-referrer">

微信图片_20220610121510.png

目录
相关文章
|
25天前
|
测试技术
Cypress如何设置全局URL?
Cypress如何设置全局URL?
|
2月前
|
网络协议
地址重叠时,用户如何通过NAT访问对端IP网络?
地址重叠时,用户如何通过NAT访问对端IP网络?
51 0
|
2月前
|
前端开发
Vue3/React 动态设置 ant-design/icons 图标
Vue3/React 动态设置 ant-design/icons 图标
60 1
|
3月前
|
Java
java代码实现使用网络地址下载文件
java代码实现使用网络地址下载文件
|
7天前
|
安全 网络协议 测试技术
网络地址 0.0.0.0 与回环地址 127.0.0.1 的区别
网络地址 0.0.0.0 与回环地址 127.0.0.1 的区别
19 0
|
19天前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
15 0
|
19天前
|
前端开发 JavaScript 安全
react 如何return script 标签和内容
在React中,你不能直接返回一个`<script>`标签,因为React会尝试解析并渲染所有的子节点,而`<script>`标签的内容通常会被视为JavaScript代码,而不是要渲染的文本。 但是,如果你只是想在React组件中嵌入一些JavaScript代码,你可以使用`dangerouslySetInnerHTML`属性。这个属性允许你插入原始的HTML内容,但是它非常危险,因为它会执行其中的任何JavaScript代码。因此,只有在你完全信任该内容,并且知道它是安全的情况下,才应该使用这个属性。 以下是一个示例,它创建了一个包含JavaScript代码的`<script>`标签:
|
1月前
|
XML JSON 前端开发
使用react实现通过经纬度获取地址(地理/逆地理编码)
我使用的是高德地图的开放平台实现的
28 0
|
1月前
|
小程序 前端开发
获取url地址指定参数值
获取url地址指定参数值
|
2月前
|
数据采集 网络协议 Linux
网络基础『发展 ‖ 协议 ‖ 传输 ‖ 地址』
网络基础『发展 ‖ 协议 ‖ 传输 ‖ 地址』
19 0
网络基础『发展 ‖ 协议 ‖ 传输 ‖ 地址』

热门文章

最新文章

相关产品

  • 云迁移中心