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

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

2022-06-10 665
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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网络
设置网络
React Native设置
URL地址
君伟说
目录
相关文章
尹正杰
|
18天前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
尹正杰
37 4
React技术栈-React路由插件之自定义组件标签
龙大吉
|
21天前
|
安全 Java 网络安全
【认知革命】JAVA网络编程新视角：重新定义URL与URLConnection，让网络资源触手可及！
【认知革命】JAVA网络编程新视角：重新定义URL与URLConnection，让网络资源触手可及！
龙大吉
31 2
路边两盏灯
|
27天前
|
网络协议
【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
路边两盏灯
36 0
路边两盏灯
|
27天前
|
API
【Azure API 管理】Azure API Management在设置 Policy时，如何对URL进行解码呢？ 使用 HttpUtility.UrlDecode 出错
【Azure API 管理】Azure API Management在设置 Policy时，如何对URL进行解码呢？ 使用 HttpUtility.UrlDecode 出错
路边两盏灯
26 0
嘟嘟嘟嘟嘟嘟
|
2月前
|
缓存 安全 Web App开发
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
嘟嘟嘟嘟嘟嘟
38 2
竹子爱熊猫
|
2月前
|
缓存 网络协议 Java
（六）网络编程之化身一个请求感受浏览器输入URL后奇妙的网络之旅！
在浏览器上输入一个URL后发生了什么？ 这也是面试中老生常谈的话题，包括网上也有大量关于这块的内容。
竹子爱熊猫
71 0
朝阳39
|
2月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 （2024最新版）含受控组件、非受控组件、单行多行输入框 input，下拉选择 select，单选 radio，多选 checkbox，标签 label
react18【系列实用教程】双向绑定表单 （2024最新版）含受控组件、非受控组件、单行多行输入框 input，下拉选择 select，单选 radio，多选 checkbox，标签 label
朝阳39
80 1
米果粒
|
3月前
|
Python
url标签
【6月更文挑战第29天】url标签。
米果粒
26 5
土木林森
|
3月前
|
安全 Java 网络安全
【认知革命】JAVA网络编程新视角：重新定义URL与URLConnection，让网络资源触手可及！
【6月更文挑战第22天】JAVA网络编程中，URL代表统一资源定位符，用于表示网络资源地址。通过`new URL(&quot;address&quot;)`创建URL对象，可解析和访问其组件。URLConnection是与URL建立连接的接口，用于定制HTTP请求，如设置GET/POST、超时及交换数据。
土木林森
35 1
土木林森
|
3月前
|
Java 程序员 数据处理
【技能升级】JAVA程序员的进阶之路：掌握URL与URLConnection，轻松玩转网络资源！
【6月更文挑战第21天】在Java中，URL是网络资源的位置标识，如`http://www.example.com/resource.txt`，而URLConnection是与这些资源交互的接口。创建URL对象后，通过`openConnection()`获取URLConnection实例以读取或写入资源。读取时，设置请求头，获取输入流并读取数据；写入（POST）时，设置输出流并写入数据。处理网络操作时，别忘了异常处理、使用连接池以优化性能、设置超时以及恰当使用请求头和响应头。这些最佳实践能助你高效、稳定地进行网络编程。
土木林森
30 0

热门文章

最新文章

  • 1
    React Native-组件的引用
  • 2
    react学习系列4 组件生命周期
  • 3
    React Native填坑之旅 -- 回归小插曲
  • 4
    react中的useState为什么是一个数组，而不是一个对象？
  • 5
    理解React页面渲染原理，如何优化React性能？
  • 6
    react如何获取后台数据
  • 7
    Angular 之父为什么怼 React ？（上）
  • 8
    React 中 setState 什么时候是同步的，什么时候是异步的
  • 9
    前端项目实战贰拾肆-​react-admin+material ui渲染树形结构
  • 10
    揭秘2017双11背后的网络－双11的网络产品和技术概览
  • 1
    判断三次URL可用性
    37
  • 2
    检查URL可用性2
    34
  • 3
    根据service名字获得真实的URL
    50
  • 4
    如何在JS中实现修改URL参数而不刷新页面
    56
  • 5
    人工智能平台PAI产品使用合集之机器学习PAI-EAS部署好后，服务的公网API和URL怎么配置
    251
  • 6
    js原生方法，获取url上面所有参数，并返回一个对象
    141
  • 7
    报错 create connection SQLException, url: jdbc:mysql://noreggie?serverTimezone=Asia/Shanghai&useUnicod
    43
  • 8
    前端vue2、vue3去掉url路由“ # ”号——nginx配置（二）
    229
  • 9
    前端vue2、vue3去掉url路由“ # ”号——nginx配置（一）
    303
  • 10
    【C++】在使用代码组装URL时，一定要注意的坑......
    48

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • TCP/IP 网络基础
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 企业级云上网络构建

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
    • 下一篇
    通义千问API入门教程