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

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

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

问题

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

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

解决方案

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

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

微信图片_20220610121510.png

文章标签：
前端开发
君伟说
目录
相关文章
东方睿赢
|
Java 程序员
JAVA程序员的进阶之路：掌握URL与URLConnection，轻松玩转网络资源！
在Java编程中，网络资源的获取与处理至关重要。本文介绍了如何使用URL与URLConnection高效、准确地获取网络资源。首先，通过`java.net.URL`类定位网络资源；其次，利用`URLConnection`类实现资源的读取与写入。文章还提供了最佳实践，包括异常处理、连接池、超时设置和请求头与响应头的合理配置，帮助Java程序员提升技能，应对复杂网络编程场景。
东方睿赢
420 9
夏天49597
|
前端开发 JavaScript
React 标签组件 Tag
在现代Web开发中，标签（Tag）是常见的UI元素，用于分类、标记或表示状态。本文基于React框架，介绍如何创建和管理标签组件，涵盖基础使用、样式处理及常见问题与易错点。通过函数式组件定义标签，并使用CSS或CSS-in-JS进行样式处理。常见问题包括样式冲突、事件绑定错误和可关闭标签逻辑错误，提供解决方案如命名空间、CSS模块化和正确事件绑定方法。掌握这些内容有助于提高开发效率和代码质量。
夏天49597
579 27
六卿
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法，包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理，最后总结了实现思路。
六卿
378 1
react动态生成input、select标签以及思路总结
龙大吉
|
Java 开发者
JAVA高手必备：URL与URLConnection，解锁网络资源的终极秘籍！
在Java网络编程中，URL和URLConnection是两大关键技术，能够帮助开发者轻松处理网络资源。本文通过两个案例，深入解析了如何使用URL和URLConnection从网站抓取数据和发送POST请求上传数据，助力你成为真正的JAVA高手。
龙大吉
451 11
尹正杰
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
尹正杰
309 4
React技术栈-React路由插件之自定义组件标签
qhhf_地道酬勤
|
存储 缓存 网络协议
计算机网络常见面试题（二）：浏览器中输入URL返回页面过程、HTTP协议特点，GET、POST的区别，Cookie与Session
计算机网络常见面试题（二）：浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式，GET、POST的区别，DNS的解析过程、数字证书、Cookie与Session，对称加密和非对称加密
qhhf_地道酬勤
867 2
html的七十二变
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于：`Link` 是专门为 React 应用设计的，用于实现客户端路由导航，不会触发页面的重新加载，而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
html的七十二变
799 3
六卿
|
前端开发 JavaScript
React中Fragment标签和空标签的使用
在React中，Fragment标签用于包裹多个子元素，避免添加不必要的DOM元素，空标签`<>`是Fragment的简写形式。
六卿
316 2
六卿
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件，将其内容转化为JSON对象，并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程，并提供了一个封装函数，用于在发起请求前动态生成配置化的URL地址。
六卿
602 1
六卿
|
JavaScript 前端开发
react字符串转为dom标签，类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法，类似于Vue中的`v-html`指令，通过使用`dangerouslySetInnerHTML`属性实现。
六卿
615 0
react字符串转为dom标签，类似于Vue中的v-html

热门文章

最新文章

  • 1
    React-Native中this的带给大家的困惑
  • 2
    React的跨域问题处理
  • 3
    使用 React 和 Vue 创建相同的应用，他们有什么差异？
  • 4
    使用 esbuild 来打包一个 React 库
  • 5
    玩转react-hooks,自定义hooks设计模式及其实践
  • 6
    URL、URL 的结构以及 URI 与 URL 之间的区别
  • 7
    请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径
  • 8
    InstaGraph：将文本和URL转化为知识图谱的强大工具
  • 9
    Google不推荐在URL里使用竖线
  • 10
    Failed to fetch URL https://dl-ssl.google.com/android/repository/repository-6.xml, reason: Connection to https://dl-ssl.google.com refused
  • 1
    基于python大数据的青少年网络使用情况分析及预测系统
    899
  • 2
    概率神经网络的分类预测--基于PNN的变压器故障诊断（Matlab代码实现）
    1253
  • 3
    win10系统以太网未识别网络 没有有效ip配置怎么办？
    4352
  • 4
    【基于TTNRBO优化DBN回归预测】基于瞬态三角牛顿-拉夫逊优化算法（TTNRBO）优化深度信念网络（DBN）数据回归预测研究（Matlab代码实现）
    410
  • 5
    配置VM网络：如何设定静态IP以访问主机IP和互联网
    730
  • 6
    Python 网络请求架构——统一 SOCKS5 接入与配置管理
    591
  • 7
    阿里云渠道商：怎么配置阿里云网络ACL？
    728
  • 8
    Cisco IOS XRv 9000 Router IOS XR Release 7.11.2 MD - 思科 IOS XR 网络操作系统
    665
  • 9
    基于灰色神经网络的预测方法
    600
  • 10
    脑控网络设计方案续写
    436

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！