AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2022-06-10 903
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： react设置img标签url网络地址不显示

问题

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

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

解决方案

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

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

微信图片_20220610121510.png

文章标签：
前端开发
关键词：
网络地址
React Native标签
设置网络
URL网络
URL地址
君伟说
目录
相关文章
yuanzhengme
|
Java
Java开发实现图片URL地址检验，如何编码？
【10月更文挑战第14天】Java开发实现图片URL地址检验，如何编码？
yuanzhengme
610 4
91HTTP代理
|
Web App开发 缓存 负载均衡
为什么要在网络设置静态代理ip？
随着科技和互联网的发展，越来越多企业需要使用代理服务器。设置静态代理IP可提高安全性、保护用户IP地址，实现地域性访问、缓存加速及负载均衡等优势。具体配置方法包括在Windows、macOS操作系统或浏览器中进行网络设置，输入代理服务器的地址和端口。通过合理设置代理IP，用户能更好地管理网络流量，提升隐私与性能。
91HTTP代理
599 37
游客dk6iqnpz2vtei
|
虚拟化 网络虚拟化 Windows
导入虚拟机到Hyper-V环境时，理解并配置网络适配器设置是确保网络通信的关键
在Hyper-V环境中，正确配置虚拟机的网络适配器是确保其网络通信的关键。需先启用Hyper-V功能并创建虚拟交换机。接着，在Hyper-V管理器中选择目标虚拟机，添加或配置网络适配器，选择合适的虚拟交换机（外部、内部或私有），并根据需求配置VLAN、MAC地址等选项。最后，启动虚拟机并验证网络连接，确保其能正常访问外部网络、与主机及其他虚拟机通信。常见问题包括无法访问外部网络或获取IP地址，需检查虚拟交换机和适配器设置。
游客dk6iqnpz2vtei
999 6
夏天49597
|
前端开发 JavaScript
React 标签组件 Tag
在现代Web开发中，标签（Tag）是常见的UI元素，用于分类、标记或表示状态。本文基于React框架，介绍如何创建和管理标签组件，涵盖基础使用、样式处理及常见问题与易错点。通过函数式组件定义标签，并使用CSS或CSS-in-JS进行样式处理。常见问题包括样式冲突、事件绑定错误和可关闭标签逻辑错误，提供解决方案如命名空间、CSS模块化和正确事件绑定方法。掌握这些内容有助于提高开发效率和代码质量。
夏天49597
480 27
小白学大数据
|
缓存 负载均衡 安全
Swift中的网络代理设置与数据传输
Swift中的网络代理设置与数据传输
小白学大数据
482 4
warmhearted
|
监控 安全 网络安全
Elasticsearch集群的网络设置
Elasticsearch集群的网络设置
warmhearted
529 3
蓝易云
|
网络协议 Linux
使用nmcli命令设置IP地址并排查网络故障
nmcli 是一个功能强大的网络管理工具，通过它可以轻松配置IP地址、网关和DNS，同时也能快速排查网络故障。通过正确使用nmcli命令，可以确保网络配置的准确性和稳定性，提高系统管理的效率。希望本文提供的详细步骤和示例能够帮助您更好地掌握nmcli的使用方法，并有效解决实际工作中的网络问题。
蓝易云
1443 2
html的七十二变
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于：`Link` 是专门为 React 应用设计的，用于实现客户端路由导航，不会触发页面的重新加载，而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
html的七十二变
677 3
lsug6eziqmdfk1111
|
Ubuntu 网络安全 数据安全/隐私保护
阿里云国际版如何设置网络控制面板
阿里云国际版如何设置网络控制面板
lsug6eziqmdfk1111
353 4
六卿
|
前端开发 JavaScript
React中Fragment标签和空标签的使用
在React中，Fragment标签用于包裹多个子元素，避免添加不必要的DOM元素，空标签`<>`是Fragment的简写形式。
六卿
242 2

热门文章

最新文章

  • 1
    Python复杂网络结构可视化——matplotlib+networkx
  • 2
    YOLOv5网络结构解析
  • 3
    AliOS Things SIG BLE Mesh网络的介绍和搭建
  • 4
    Hadoop的网络容错
  • 5
    LSTM（长短期记忆）网络的算法介绍及数学推导
  • 6
    iOS网络编程实践--蓝牙对等网络通信实例讲解
  • 7
    洛神研究所丨从SD-WAN到SD-Branch，分支网络的技术变革
  • 8
    【华为数通HCIP | 网络工程师】821-IGP高频题、易错题之OSPF（2）
  • 9
    Android TV 开发】安卓电视调试 ( 开启网络远程调试 )（二）
  • 10
    flutter网络dio框架get请求使用总结
  • 1
    Java的URL与URLConnection技术深度解析
    1021
  • 2
    Pikachu URL 重定向通关解析
    432
  • 3
    Java的url与urlconnection的使用
    293
  • 4
    Pivotal Greenplum JDBC在数据库开启ssl后url如何编辑
    476
  • 5
    用pivotal的数据库连接驱动的时候的程序，ssl的url如何配
    258
  • 6
    实时计算 Flink版产品使用合集之jdbccatalog中能指定url参数吗
    342
  • 7
    第六十七章 使用 Web 服务监控 IRIS - 监控 Web 服务的 URL
    199
  • 8
    Spring一行代码搞定图片url地址转换为Base64，超简单！！！！
    3213
  • 9
    linux上SVN出现 "Unable to connect to a repository at URL 'svn://xx.xx.xx.xx/xxx' 和 No repository ...
    1430
  • 10
    实时计算 Flink版产品使用合集之生成OSS URL时长度超过64位的情况如何解决
    243

    • 相关课程

    更多
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • React 入门与实战
  • 企业上云攻略-阿里云网络产品应用系列教程
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • React 入门教程开发文档
  • 网络管理者必知-2分钟了解新出台的《网络安全法》

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎