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

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

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

问题

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

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

解决方案

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

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

微信图片_20220610121510.png

文章标签：
前端开发
关键词：
设置网络
URL网络
React Native标签
URL地址
网络地址
君伟说
目录
相关文章
东方睿赢
|
23天前
|
Java 程序员
JAVA程序员的进阶之路：掌握URL与URLConnection，轻松玩转网络资源！
在Java编程中，网络资源的获取与处理至关重要。本文介绍了如何使用URL与URLConnection高效、准确地获取网络资源。首先，通过`java.net.URL`类定位网络资源；其次，利用`URLConnection`类实现资源的读取与写入。文章还提供了最佳实践，包括异常处理、连接池、超时设置和请求头与响应头的合理配置，帮助Java程序员提升技能，应对复杂网络编程场景。
东方睿赢
49 9
蓝易云
|
10天前
|
网络协议 Linux
使用nmcli命令设置IP地址并排查网络故障
nmcli 是一个功能强大的网络管理工具，通过它可以轻松配置IP地址、网关和DNS，同时也能快速排查网络故障。通过正确使用nmcli命令，可以确保网络配置的准确性和稳定性，提高系统管理的效率。希望本文提供的详细步骤和示例能够帮助您更好地掌握nmcli的使用方法，并有效解决实际工作中的网络问题。
蓝易云
26 2
龙大吉
|
23天前
|
Java 开发者
JAVA高手必备：URL与URLConnection，解锁网络资源的终极秘籍！
在Java网络编程中，URL和URLConnection是两大关键技术，能够帮助开发者轻松处理网络资源。本文通过两个案例，深入解析了如何使用URL和URLConnection从网站抓取数据和发送POST请求上传数据，助力你成为真正的JAVA高手。
龙大吉
43 11
qhhf_地道酬勤
|
19天前
|
存储 缓存 网络协议
计算机网络常见面试题（二）：浏览器中输入URL返回页面过程、HTTP协议特点，GET、POST的区别，Cookie与Session
计算机网络常见面试题（二）：浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式，GET、POST的区别，DNS的解析过程、数字证书、Cookie与Session，对称加密和非对称加密
qhhf_地道酬勤
75 2
html的七十二变
|
28天前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于：`Link` 是专门为 React 应用设计的，用于实现客户端路由导航，不会触发页面的重新加载，而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
html的七十二变
34 3
六卿
|
2月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法，包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理，最后总结了实现思路。
六卿
36 1
react动态生成input、select标签以及思路总结
lsug6eziqmdfk1111
|
1月前
|
Ubuntu 网络安全 数据安全/隐私保护
阿里云国际版如何设置网络控制面板
阿里云国际版如何设置网络控制面板
lsug6eziqmdfk1111
31 4
尹正杰
|
2月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
尹正杰
55 4
React技术栈-React路由插件之自定义组件标签
六卿
|
2月前
|
前端开发 JavaScript
React中Fragment标签和空标签的使用
在React中，Fragment标签用于包裹多个子元素，避免添加不必要的DOM元素，空标签`<>`是Fragment的简写形式。
六卿
27 2
六卿
|
2月前
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件，将其内容转化为JSON对象，并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程，并提供了一个封装函数，用于在发起请求前动态生成配置化的URL地址。
六卿
79 1

热门文章

最新文章

  • 1
    #yyds干货盘点 【React工作记录三十一】dva.js初识
  • 2
    next.js博客搭建_react-markdown渲染内容（第三步）
  • 3
    基于React的简易社交媒体应用设计与实现
  • 4
    解决React报错Encountered two children with the same key
  • 5
    基于React的简易REST API客户端设计与实现
  • 6
    react实战笔记137-创建RTKQ简介3
  • 7
    照着官方文档学习react
  • 8
    React-Native 爬坑
  • 9
    react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
  • 10
    React Native-组件的引用
  • 1
    探索机器学习中的神经网络：从基础到应用
    85
  • 2
    安利7个免费开源的网络监控工具，网络工程师速度收藏！
    322
  • 3
    云计算与网络安全：技术融合的未来
    50
  • 4
    网络安全的屏障与密钥：漏洞防御、加密技术与安全意识
    46
  • 5
    网络安全的守护者：漏洞、加密与意识的三维防御
    42
  • 6
    网络安全与信息安全：从漏洞到防护的全方位解析
    63
  • 7
    云计算与网络安全：技术进展与挑战
    51
  • 8
    `nmap`是一个开源的网络扫描工具，用于发现网络上的设备和服务。Python的`python-nmap`库允许我们在Python脚本中直接使用`nmap`的功能。
    160
  • 9
    图神经网络是一类用于处理图结构数据的神经网络。与传统的深度学习模型（如卷积神经网络CNN和循环神经网络RNN）不同，
    90
  • 10
    生成对抗网络（GAN）由两部分组成：生成器（Generator）和判别器（Discriminator）。
    432

    • 相关课程

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

    • 相关电子书

    更多
  • Session：更加安全、可靠的数据中心网络产品更新
  • Session：极简易用的全球化网络产品更新
  • Session：弹性、高可用、可观测的应用交付网络产品更新

    • 相关实验场景

    更多
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
    • 下一篇
    无影云桌面