首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

PNG未在react tsx页面中显示,没有错误

可能有以下几个原因:

  1. 文件路径错误:请确保引用的PNG文件路径正确,并且文件在该路径下存在。在React中,可以使用相对路径或绝对路径引用文件。如果使用相对路径,请确保相对于当前文件的位置正确。
  2. 图片资源未正确导入:在React中,需要将图片资源导入到代码中才能使用。可以使用import语句或require语句导入图片资源。确保导入语句正确,并且导入的变量或路径正确。
  3. JSX中的图片引用错误:在JSX中,可以使用<img>元素来显示图片。确保<img>元素的src属性值正确指向PNG文件路径或导入的变量。
  4. Webpack配置问题:如果在项目中使用了Webpack作为打包工具,可能需要在Webpack配置中添加对PNG文件的处理规则。请确保Webpack配置正确,并且包含对PNG文件的处理规则。

如果以上解决方法都无效,建议检查浏览器开发者工具中的网络选项卡,查看是否成功加载PNG文件,并且查看控制台中是否有其他错误信息。此外,也可以提供更多代码和详细的错误信息,以便更准确地帮助您解决问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Next.js 14 初学者入门指南(下)

4、title metadata 关于元数据中的title属性,这是一个非常关键的部分,它直接影响到你的页面在搜索引擎中的显示标题以及用户在浏览器标签页中看到的内容。...举个例子,如果你的一个页面没有指定特定的标题,那么它就会使用default中的值。...创建加载状态 在 loading.tsx 文件中,你可以定义一个或多个加载状态的 React 组件。这些组件可以是简单的动画,如旋转的加载指示器,或者更复杂的占位符布局,如骨架屏。...Next.js 通过文件系统层次结构中的 error.tsx 文件,为开发者提供了一种灵活而强大的方式来创建和管理错误UI,以及处理特定路由段的错误。...错误恢复功能 在 error.tsx 中,你可以提供恢复功能,如重试按钮,允许用户尝试从错误中恢复,而无需重新加载整个页面。

36810
  • Vite2+React+TypeScript:搭建企业级轻量框架实践

    编码规范 tsconfig eslint prettier 事件总线 为了规范项目的初始化流程,方便在流程中插入自定义逻辑,在main.tsx入口调用initialize(app)方法,initialize...tsx组件 // src/App.tsx import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import...hooks; 在config中,每个组件通过react-lazily-component插件懒加载,优化加载策略; 5....性能测试 开发环境启动 [image.png] 图中可以看出,Vite在冷启动时对6项依赖进行Pre-Bundling后注入主应用中,整个项目启动时间只花了1463ms,性能相当快,这里不由感叹尤大对工程研究确实有一套...构建后的资源包 [image.png] 分包策略是依据路由页面来切割,对js和css单独分离。

    2.1K20

    React组件设计实践总结02 - 组件的组织

    在 React 中, 组件就是模块. 单一职责要求将组件限制在一个’合适’的粒度. 这个粒度是比较主观的概念, 换句话说’单一’是一个相对的概念....对应到 React 中, 纯组件指的是 props(严格上说还有 state 和 context, 它们也是组件的输入)没有变化, 组件的输出就不会变动....纯组件对 React 的性能优化也有重要意义. 如果一个组件是一个纯组件, 如果’输入’没有变动, 那么这个组件就不需要重新渲染. 组件树越大, 纯组件带来的性能优化收益就越高....例如 react 导出的是一个 React 对象; LoginPage 导出的是一个登录页面; somg.png 导入的是一张图片. 这类模块总有一个确定的’主体对象’....这是某政府部门的服务申报系统, 一共由四个页面组成: image.png 1️⃣ 划分页面 页面通常是最顶层的组件单元, 划分页面非常简单, 我们根据原型图就可以划分四个页面: ListPage,

    2K31

    Next.js 强劲对手来了!💿 Remix 正式宣布开源

    在 Remix 中,一个页面通常包含多层级页面,每个子页面控制自身的 UI 展现,而且独立控制自身的数据加载和代码分割。...上述嵌套路由一个显而易见的优点就是,某个部分如果报错了,结合后续会提到的 ErrorBoundary 和 CatchBoundary 这个部分可以显示错误的页面,而用户仍然可以操作其他部分,而不需要刷新整个页面以重新加载使用...,当出现这些非预期的错误时,就会激活这个函数,显示对应函数的表示错误信息的 UI。...,即你在 loader、action 函数中,在客户端或服务端,手动抛出的 Response 错误,这些错误的路径是可预期的,在 CatchBoundary 中,通过 useCatch 钩子获取这些抛出的...当我们没有在子路由中添加 ErrorBoundary 或 CatchBoundary 函数时,一旦遇到错误,这些错误就会向更上一级的路由冒泡,直至最顶层的路由页面,所以你只最好在最顶层的路由文件里声明一个

    1.3K30

    从一个例子看开闭原则

    例子 这是一个实战中的项目,需求目标很简单:提供统一内容搜索能力 ,包括 文档,知识,视频。可以通过目录树切换查看该库 的 文档详情/知识列表/视频列表。 搜索页面比较简单,这里就不讲了。...类似的交互图 详情页.png image.png 列表页.png 用例图 内容用例.png 第一步:梳理异同 动手之前,先撸一撸基于内容类型,交互的相同点和不同点。...有没有什么更好的方案呢? 第三部:抽象,封装 详情和列表的主页面需要关系类型内容吗?可以不需要! 先看下新版的列表主页代码。...如果支持List,展示列表页面; * 2. 不满足条件1,且支持详情页面,展示详情页面; * 3....ContentTypes.FAQ]: FaqList, [ContentTypes.VIDEO]: VideoList, [ContentTypes.CASE]: CaseList, } 如果Case和Doc类似,没有列表页面

    75710

    【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件?

    vue和react都已经全面进入了hooks时代(在vue中也称为组合式api,为了方便后面统一称为hooks),然而受到以前react中类组件和vue2写法的影响,很多开发者都不能及时转换过来,以致于开发出一堆面条式代码...components.png 然而,为了保持组件功能单一,我们是不是要将组件拆分得特别细才可以呢?事实并非如此。...(vue|tsx) // 只在componentA内部复用的组件 |-- ComponentB.(vue|tsx) // 当前页面的组成部分B |-- Common....(vue|tsx) // 当前页面 复制代码 实际上这种组织方式,在抽象意义上并不完美,因为通用组件和页面组成部分的组件并没有区分开来。...一个状态是否要放到全局,我一般有两个判断标准: 状态是否在多个页面间共享; 跳转页面后又返回该页面,是否需要还原跳转之前的状态(仅对react而言,vue有keep-alive) 而全局状态管理库中的函数

    1.1K10

    使用 TypeScript 编写 React.js 应用 | 笔记

    此外,在 ProjectForm 组件中实现一个 isValid 函数,用于检查是否存在任何验证错误。...仅当不是 loading 且没有 error 时才显示 More... 按钮, 并处理 More... 按钮的 click 事件并调用 handleMoreClick 。...单击表单上的保存按钮 验证卡片是否显示更新的数据 刷新浏览器 验证项目是否仍处于更新状态 注意: 更新后卡片会被排到最后, 目前没有在代码中排序 错误推断, 发现并不对, db.json 保存更新并不会重新排序...,应显示项目列表 导航到项目路由后,刷新浏览器 你应该会看到项目页面刷新并显示项目, 而不是 404 23.... ); } export default ProjectForm; 提供 store 这已经在 src\App.tsx 中完成,因为它继承自父页面组件:页面 =>List=>Form

    87990

    typescript实战总结之实现一个互联网黑白墙

    你将收获 如何使用umi快速搭建一个基于React + antd + typescript的前端项目 中后台前端项目的目录和ts文件划分 在React组件中使用typescript 在工具库中使用typescript...中后台前端项目的目录和ts文件划分 我们先看看本次研究的项目的目录划分: ts-react ├─ src │ ├─ assets │ │ └─ yay.jpg │ ├─ components │...同理对于页面文件夹来说, 也应具有类似的结构, 就好比上面的about页面, 包含如下结构: components 该页面专有的组件目录 index.tsx 关于页面的主文件 index.less 关于页面的样式文件...在React组件中使用typescript 这里笔者将会拿该项目的自定义上传组件以及白名单页面作为例子, 文件上传组件笔者将采用SFC(即函数组件), 白名单页面将采用类组件, 这样可以方便大家对这两中组件开发模式下的...的函数组件, React提供了函数组件的类型SFC, 内置了children所以我们不用显示的再声明一次.

    1.2K10

    React-Webpack5-TypeScript打造工程化多页面应用

    当然所谓的多页面应用简单来说也就是打包后生成多个html文件。 这篇文章中我们来重点介绍多页面应用,文章中涉及的内容纯干货。我们废话不多说,一篇文章让你彻底搞懂所谓工程化的多页面应用构建。...让我们来仔细定位一下错误。ts告诉我们ReactDom.render方法中传入的参数类型不兼容。嗯,本质上是我们react语法写错了。...同时因为我们在app.tsx中引入了图片 // webpack.base.js { test: /\.(png|jpe?...其实无法就是引入文件时默认后缀名的问题: 目前webpack不支持默认后缀名.tsx 而tsconfig.json中是支持后缀名.tsx,所以显示声明会提示错误。...让我们来尝试修改index.tsx,使用别名来引入: 此时我们发现并没有路径提示,这个!是真的无法接受!

    2K10

    分享 7 个你可能不知道的 Next.js 14 小技巧

    元数据API的使用 你可以在页面组件(如page.tsx)或布局组件(如layout.tsx)中使用元数据API。...例如: app/layout.tsx(根布局) app/favourite/layout.tsx(嵌套的博客布局) app/favourite/[slug]/page.tsx(博客页面) 这种结构确保了元数据可以从最顶层布局继承下来...在目录中创建不直接提供给客户端的文件 在特定目录中创建文件,这些文件不会直接作为页面提供给客户端,除非它们被显式地添加到page.tsx文件中。 5....我们定义了一个SlugPage组件,它接收slug作为参数,并将其转换为字符串显示在页面上。...可选的捕获所有段:可以匹配没有任何参数的路由,例如/docs。 7. 活动链接(Active Links) 在网站上,你可能注意到当前正在查看的页面链接往往有特殊的样式或覆盖层。

    75910

    解决前端常见问题:竞态条件

    获取数据 下面是一个小 demo:前端获取文章数据,并渲染到页面上 App.tsx import React from 'react'; import { Routes, Route } from 'react-router-dom...我们把相关的数据请求封装到了自定义 hook "useArticleLoading" 中,为了页面的使用体验,我们要么显示获取的数据,要么显示加载中。...不等待 articles/1 了,访问 articles/2 浏览器开始请求后台服务器,获取文章 2 的内容 网络连接没有问题 articles/2 请求立即响应了,数据渲染到页面中 articles...在 React 中可以很巧妙的通过 useEffect 的执行机制来简洁、方便地做到这点: useArticlesLoading.tsx useEffect(() => {  let didCancel...articles/2 请求立即响应了,数据渲染到页面中 articles/1 的请求响应了 由于 didCancel 变量,setArticles (fetchedArticles) 没有执行。

    1.3K20

    Next.js 14 初学者入门指南(上)

    场景2:访问/about页面 当用户访问localhost:3000/about时,显示关于页面。在src/app/about目录下创建page.tsx文件来实现。...创建404页面 在Next.js中处理404错误页面是一个简单而直接的过程,通过定义一个特定的组件,你可以为用户提供一个更友好的错误提示页面,而不是默认的浏览器错误页面。...通过在src/app目录下创建一个not-found.tsx文件,你可以定义一个NotFound组件,当用户尝试访问一个不存在的页面时,将显示该组件。...the browser; } 在上面的例子中,尽管我们创建了page.tsx文件,由于它位于_lib文件夹下,访问localhost:3000/_lib将会显示404错误,因为Next.js...移动页面到分组文件夹:将login.tsx、register.tsx和forgot-password.tsx等页面移动到(auth)文件夹中。

    1.6K10

    TypeScript在react项目中的实践

    TypeScript在react项目中的实践 前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。...就这个结构拆分前后分离其实没有什么成本 在下边分了大概这样的一些文件夹: dir/file desc index.ejs 项目的入口html文件,采用ejs作为渲染引擎 index.tsx 项目的入口js...并没有选择成熟的cra(create-react-app)来进行环境搭建,原因有下: webpack更新到4以后并没有尝试过,想自己耍一耍 结合着TS以及公司内部的东西,会有一些自定义配置情况的出现...node层的修改 除了上边提到的两端公用代码以外,还需要添加一个controller用于吐页面,因为使用的是routing-controllers这个库,渲染一个静态页面被封装的非常棒,仅仅需要修改两个页面...使用静态语言来进行开发不仅能够提高开发的效率,同时还能降低错误出现的几率。 结合着强大的vs code,Enjoy it.

    1.8K30
    领券