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

目录
相关文章
|
4月前
|
Java
Java开发实现图片URL地址检验,如何编码?
【10月更文挑战第14天】Java开发实现图片URL地址检验,如何编码?
134 4
|
5天前
|
Web App开发 缓存 负载均衡
为什么要在网络设置静态代理ip?
随着科技和互联网的发展,越来越多企业需要使用代理服务器。设置静态代理IP可提高安全性、保护用户IP地址,实现地域性访问、缓存加速及负载均衡等优势。具体配置方法包括在Windows、macOS操作系统或浏览器中进行网络设置,输入代理服务器的地址和端口。通过合理设置代理IP,用户能更好地管理网络流量,提升隐私与性能。
61 36
|
2月前
|
前端开发 JavaScript
React 标签组件 Tag
在现代Web开发中,标签(Tag)是常见的UI元素,用于分类、标记或表示状态。本文基于React框架,介绍如何创建和管理标签组件,涵盖基础使用、样式处理及常见问题与易错点。通过函数式组件定义标签,并使用CSS或CSS-in-JS进行样式处理。常见问题包括样式冲突、事件绑定错误和可关闭标签逻辑错误,提供解决方案如命名空间、CSS模块化和正确事件绑定方法。掌握这些内容有助于提高开发效率和代码质量。
82 27
|
1月前
|
缓存 负载均衡 安全
Swift中的网络代理设置与数据传输
Swift中的网络代理设置与数据传输
|
3月前
|
监控 安全 网络安全
Elasticsearch集群的网络设置
Elasticsearch集群的网络设置
86 3
|
3月前
|
网络协议 Linux
使用nmcli命令设置IP地址并排查网络故障
nmcli 是一个功能强大的网络管理工具,通过它可以轻松配置IP地址、网关和DNS,同时也能快速排查网络故障。通过正确使用nmcli命令,可以确保网络配置的准确性和稳定性,提高系统管理的效率。希望本文提供的详细步骤和示例能够帮助您更好地掌握nmcli的使用方法,并有效解决实际工作中的网络问题。
278 2
|
4月前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
5月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法,包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理,最后总结了实现思路。
61 1
react动态生成input、select标签以及思路总结
|
4月前
|
Ubuntu 网络安全 数据安全/隐私保护
阿里云国际版如何设置网络控制面板
阿里云国际版如何设置网络控制面板
|
3月前
|
Java Spring
JAVA获取重定向地址URL的两种方法
【10月更文挑战第17天】本文介绍了两种在Java中获取HTTP响应头中的Location字段的方法:一种是使用HttpURLConnection,另一种是使用Spring的RestTemplate。通过设置连接超时和禁用自动重定向,确保请求按预期执行。此外,还提供了一个自定义的`NoRedirectSimpleClientHttpRequestFactory`类,用于禁用RestTemplate的自动重定向功能。
205 0