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

React:无法从src文件夹获取本地文件,但可以从公共文件夹获取

React是一种流行的JavaScript库,用于构建用户界面。它采用组件化的开发方式,可以轻松地构建交互式、响应式的Web应用程序。

在React中,通常情况下,我们将项目的源代码文件放在一个名为"src"的文件夹中。这个文件夹包含了React组件、样式文件、图片、以及其他项目所需的资源文件等等。

然而,React的开发服务器默认只能从公共文件夹(public folder)中获取文件。公共文件夹通常包含了一些静态资源,如图标、全局样式等。因此,如果你想从src文件夹中获取本地文件,React的开发服务器是无法直接访问的。

为了解决这个问题,你可以将需要从src文件夹获取的本地文件放置在公共文件夹中,或者通过其他方式引入这些文件。以下是一些常见的解决方法:

  1. 将需要获取的本地文件移动到公共文件夹中:将src文件夹中的文件复制到public文件夹中,并使用相对路径引用这些文件。这样React的开发服务器就能够正常访问这些文件了。
  2. 使用绝对路径引用文件:如果你确定需要从src文件夹中获取文件,可以使用绝对路径来引用这些文件。例如,可以使用Webpack的alias功能将src文件夹配置为一个别名,然后在代码中使用这个别名来引用文件。
  3. 使用webpack-dev-server的proxy功能:如果你正在使用webpack-dev-server作为开发服务器,你可以使用proxy选项将文件请求代理到一个可以访问src文件夹的后端服务器上。

总之,React本身并不限制从src文件夹获取本地文件,但在开发过程中,为了更好地组织代码和资源文件,一般会将源代码放在src文件夹中,将静态资源文件放在公共文件夹中。以上是一些常见的解决方法,希望能够帮助到你。

关于腾讯云的相关产品和介绍链接地址,你可以参考腾讯云官方文档和开发者社区来获取更多信息。

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

相关·内容

PowerBIOnedrive文件夹获取多个文件,依然不使用网关

首先,数据文件放在onedrive的一个文件夹中: ? 我们按照常规思路,获取数据-文件夹: ? 导航到所要选择的文件夹,加载: ? ?...之所以必须通过gateway,原因就是导入的本质还是本地文件夹,并不是真实的onedrive网络位置。...解决思路: 仔细查看PowerQuery导入文件夹的整个过程用到的所有代码,其实你会发现,问题只有在源的位置: ? 很明显,后面的路径是绝对的本地路径。...因此,接下来我们的任务就很清楚了,要准备两个内容: 1.获取onedrive文件夹的真实网络位置,将本地路径替换掉; 2.找出能识别onedrive真实网络位置的函数,将Folder.Files替换掉。...一共有三个,我们分别看一下微软文档中简介和以上路径获取的信息: 1.SharePoint.Files ? SharePoint.Files获取的是文件,根目录下和子文件夹下的所有文件: ?

6.9K41
  • React项目的服务端渲染改造(koa2+webpack3.11)

    react路由的逻辑 │ ├── ignore.js │ └── index.js └── src ├── app 此文件夹下主要用于放置浏览器和服务端通用逻辑 │ ├──...本地开发介绍 查看本地开发主要涉及的文件src目录下的index.js文件,判断当前的运行环境,只有在开发环境下才会使用module.hot的API,实现当reducer发生变化时的页面渲染更新通知,...router文件夹下的routes.js是路由配置文件,将各个页面下的路由配置都引进来,合成一个配置数组,可以通过这个配置来灵活控制页面上下线。...} export default HomeRouter 这里多说一句,有时我们要改造的项目的页面文件里有window.location里面获取参数的代码,改造成服务端渲染时要全部去掉,或者是要在render...需要重点介绍的就是clientRouter.js这个文件,结合/src/app/configureStore.js这个文件共同理解服务端渲染的数据获取流程和React的渲染机制。

    1.3K70

    React进阶-1】0搭建一个完整的React项目(入门篇)

    这周正好有时间,所以决定仔细研究下React项目中的各个功能模块,所以我们来讲解下如何零搭建一个完整的React项目。...预处理器代码转换为css 解析字体、图片等静态资源 压缩打包后的JS、CSS文件 抽理公共代码 添加resolve选项 代码热更新 删除上一次的打包结果及记录 集成React全家桶...当我们执行npm install的时候,nodepackage.json文件读取模块名称,package-lock.json文件获取版本号,然后进行下载或者更新。...”文件中多出来的信息就是我们刚才安装的webpack的描述信息,它里面记录了安装的webpack的版本号和webpack-cli的版本号,如下: 新建项目目录和文件 项目根目录下新建”src文件夹...首先是安装依赖模块,如下: npm install react-router-dom --save-dev 模块安装完成之后,我们在src目录下新建一个pages文件夹,然后在此文件夹下新建两个

    7.9K33

    前端基建规范参考

    1.1 按功能类型来划分 按文件的功能类型来分,比如 api,组件,页面,路由,hooks,store,不管是全局使用到的,还是单独页面局部使用到的,都按照功能类型放在src下面对应的目录里面统一管理...按领域模型划分 按照页面功能划分,全局会用到的组件,api等还是放到src下面全局管理,页面内部单独使用的api和组件放到对应页面的文件夹里面,使用的时候不用上下查找文件,在当前页面文件夹下就能找到,...├─pages # 页面 │ │ └─Home # 首页页面 │ │ └─components # Home页面组件文件夹...在顶层通过 StoreProvider 注入状态 // src/main.ts import React from "react"; import ReactDOM from "react-dom";...类型自动推断,在实例化的时候传入类型,在设置和获取值的时候都会自动类型推断。 可以统一管理,把本地存储都放在一个文件里面,避免后期本地存储混乱不好维护问题。

    25430

    推荐一个零配置开箱即用的ReactVue应用自动化构建脚手架,不强大你来找我

    「由于链接无法跳转,请点击阅读原文查看详情喔,记得给bruce-cli一个Star」 bruce-cli是一个「React/Vue」应用自动化构建脚手架,其零配置开箱即用的优点非常适合入门级、初中级、快速开发项目的前端同学使用...,根据文件哈希值是否发生变化执行构建操作,哈希无变化的文件直接从缓存中获取,减少构建生成文件的时间 「缓存文件」:首次构建速度可能慢一些,构建完成后会生成本地缓存文件,可提高后续再次构建的速度 「哈希文件...(js|ts|jsx|tsx) 当src/pages目录存在且包含子文件夹,则自动识别为MPA项目 使用CSS精灵图时,必须把图标统一放到src/assets/icon下,且文件格式为png 暴露出全局变量...可用来开发原生JS项目、Jquery项目和Zepto项目等 公共函数需放置src/templates/helpers目录下,在模板内使用{{> fileName}}引用 公共模板需放置src/templates....stylelintrc.eslintignore、.eslintrc 无 业务文件 src文件夹 src文件夹 配置文件 很多,需分开书写 brucerc.js 基础文件 package.json、readme.md

    1.8K30

    React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

    API 路由 创建服务器 用 React 和 TypeScript 创建客户端 启动 创建 Todo 类型 API 获取数据 创建组件 添加 Todo 表单 展示 Todo 获取和展示数据 资源...代码编译成纯 JavaScript 后,dist 目录将用作输出文件夹。 我们还有一个 app.ts,它是服务器的入口。控制器、类型和路由也在它们各自以它们命名的的文件夹中。...dist/js 文件夹 rootDir: 告诉 TypeScript 编译 src 文件夹中的每个 .ts 文件 include: 告诉编译器包含 src 目录和子目录中的文件 exclude:...在编译时会排除数组中的文件文件夹 现在我们安装依赖项,使项目可以使用 TypeScript。...有了这些,我们现在可以转到 components 文件夹并向其文件中添加一些有意义的代码。

    17K30

    如何实现跨框架(React、Vue、Solid)的前端组件库?

    文件夹,并初始化 package.json mkdir react mkdir solid cd react npm init -y cd .....和 Solid 文件夹中创建适配层文件夹 common 并初始化package.json(路径:packages/components/react/common、packages/components...1、在 components 文件夹中创建 renderless 文件夹,并初始化 package.json mkdir renderless npm init -y package.json 文件内容如下所示...(其中 exports 项表示所有加载的资源都会 randerless 目录下的 src 文件夹中按文件路径寻找): { "name": "@opentiny/renderless", "version.../src/*" } } 2、以 React 和 Solid 为例,采用无渲染逻辑的复用方式 首先看下 renderless 需要创建的文件夹文件(注意:这里只是罗列了 renderless 文件夹中的文件结构

    1.3K10

    使用 esbuild 来打包一个 React

    因为HTML中没有indeterminate这个属性,但可以通过 Javascript 脚本来设置 const checkbox = document.getElementById("checkbox"...); checkbox.indeterminate = true; 效果如下: 所以我们的需求是需要给 checkbox 增加一个 indeterminate 属性 项目初始化 首先我们来创建一个文件夹并且初始化...npm i esbuild typescript @types/react @types/react-dom --save-dev 然后我们在根目录下创建文件 ....sourcemap 代表是否生成 sourcemap 源映射文件 minify 代表是否压缩代码 splitting 代表 多入口的是否提取公共代码 是否将 import() 异步文件单独打包 target...本地预览 当然我们的项目需要预览,建立一个 example/index.tsx 文件 import React, { ReactElement } from "react"; import { render

    1.6K20

    Taro 小程序开发大型实战(四):使用 Hooks 版的 Redux 实现应用状态管理(上篇)

    好的,复习了一下 Redux 的概念之后,我们马上来创建 Store,Redux 的最佳实践推荐我们在将 Store 保存在 store 文件夹中,我们在 src 文件夹下面创建 store 文件夹,并在其中创建...我们在 src 文件夹下创建 reducers 文件夹,在里面创建 user.js 文件,并加入我们的 User Reducer 相应的内容如下: import { SET_LOGIN_INFO, SET_IS_OPENED...接下来我们来创建 src/reducer/user.js 中会用到的常量,我们在 src 文件夹下创建 constants 文件夹,并在其中创建 user.js 文件,在其中添加内容如下: export...接下来我们来创建 src/reducer/post.js 中会用到的常量,我们在 src/constants文件夹下创建 user.js 文件,在其中添加内容如下: export const SET_POSTS...•接着我们将之前 props 里面获取到的 nickName 和 avatar 替换成我们 Redux store 里面获取到状态,这里我们为了用户体验, taro-ui 中导出了一个 AtAvatar

    2.2K21

    TypeScript在react项目中的实践

    就这个结构拆分前后分离其实没有什么成本 在下边分了大概这样的一些文件夹: dir/file desc index.ejs 项目的入口html文件,采用ejs作为渲染引擎 index.tsx 项目的入口js...各种静态资源的存放位置,图片之类文件 webpack 里边存放了各种环境的webpack脚本命令以及dll的生成 前后端复用代码的一个尝试 实际上边还漏掉了一个新增的文件夹,我们在src目录下新增了一个...要实现这样的配置,基于上述项目需要修改如下几处: src下的utils和config部分代码迁移到common文件夹下,主要是用于区分是否可前后通用 为了将对之前node结构方面的影响降至最低,我们需要在...common文件夹下新增一个index.ts索引文件,并在utils/index.ts下引用它,这样对于node方面使用来讲,并不需要关心这个文件是来自utils还是common // src/common...有一点要注意的,如果最终需要上传这些静态资源,记得连带着verdors.dll.js一并上传 在本地开发时,vendors文件并不会自动注入到html模版中去,所以我们有用到了另一个插件,add-asset-html-webpack-plugin

    1.8K30

    Node.js-具有示例API的基于角色的授权教程

    1.https://github.com/cornflourblue/angular-9-role-based-authorization-example下载或克隆Angular 9教程代码 2.通过从项目根文件夹...1.https://github.com/cornflourblue/react-role-based-authorization-example下载或克隆React教程代码 2.通过从项目根文件夹...4.通过从项目根文件夹中的命令行运行npm start来启动应用程序,这将启动一个显示React示例应用程序的浏览器,并且应该与已经运行的Node.js基于角色的授权API挂钩。...1.https://github.com/cornflourblue/vue-role-based-authorization-example下载或克隆Vue.js教程代码 2.通过从项目根文件夹(...路径:/_helpers helpers文件夹包含所有不适合其他文件夹但没有理由拥有自己的文件夹的零碎内容。

    5.7K10

    webpack使用优化(react篇)

    src目录下一级的文件,除了page文件夹react的主体逻辑文件之外,其它的像img, js, css, libs,都属于各个页面都会用到的公共文件,如utils, 上报等。...page目录下,common文件夹主要旋转跟React相关的一些公共文件,如公共的component,中间件等。而其它的文件夹就是每个页面的主体逻辑和资源,另外就是页面对应的html文件。...由于家校群采用的是React+ Redux这套方案,我们文件夹的名字也很能体现这套方案的特色。...如果你还用到React-Router,可能你还需要多加一个route的文件夹,里面用存放项目route的配置文件。...如果无法使用服务器构建,开发时请让小伙伴统一开发路径 webpack的bug导致如果本地开发目录路径不一致,编译出来的md5会不一致。所以推荐使用服务器构建。

    1.6K60

    组件Image和九宫格效果

    一、组件Image 在开发中有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源 当前RN项目中加载图片 RN中引入其他文件中的内容基本都是使用require引用,图片也不例外 require后面的路径跟img中src中的路径基本相似,但有两个比较重要的点 同级目录的话...必须将图片放到iOS项目中的asset文件夹或者Android drawable文件夹(如果不知道这两个文件,自行百度),当项目在iOS端运行时会自动加载asset中的图片,在android端运行时会自动加载...BadgeData.json文件放到跟index.android.js同级的目录里 将source中的图片放到android的drawable文件夹和iOS的asset文件夹, 点击创建drawable..."react"; import { AppRegistry, StyleSheet, Text, View, Image } from "react-native"; /*设置一些全局变量*/ //获取设备的宽

    1.4K20
    领券