使用 webpack 动态提供图像

2024-05-01

我有一个关于 webpack 和服务图像的问题。

我有一个 webpack 配置,它构建了一个 React webapp,并且还提供来自特定文件夹的 .jpg 文件。

但是,如果我从我的网络应用程序下载新图像并将其添加到此文件夹中,会发生什么情况?

我可以刷新 webpack 以便它将提供新图像并且我将能够使用以下命令导入它require.context? 或者,这是 webpack 不应该做的事情,所以我需要在后端处理这个问题?

Thanks,


这通常不是由 Webpack 处理的事情。require.context 创建参考 https://webpack.js.org/guides/dependency-management/到目录中的所有模块(或在本例中为图像),与正则表达式匹配的请求可能需要这些模块,因此如果您要使用它,则每次添加或删除图像时都需要重新编译您的应用程序文件夹。

最好在后端处理这个问题,这样您就可以直接使用图像的 URL。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 webpack 动态提供图像 的相关文章

  • 如何使用 Next Script 精确控制脚本标签的插入位置

    我目前正在尝试将第三方脚本添加到我的 Next js 应用程序中 该脚本会在脚本标签正下方插入一个 iframe 所以我需要精确控制脚本标签在页面上的位置 我目前正在使用下一个 脚本 https nextjs org docs api re
  • 开玩笑错误意外的令牌...(ES6)

    每当我在命令行中运行 jest 时 都会收到以下错误 Test suite failed to run Users
  • Webpack将js/css文件内容直接注入到index.html

    我有这样的代码
  • 无法验证 CSRF 令牌的真实性 Rails/React

    我的 Rails 应用程序中有一个 React 组件 我正在尝试使用它fetch 发送一个POST对于我在本地主机上托管的 Rails 应用程序 这给了我错误 ActionController InvalidAuthenticityToke
  • Firebase setDoc() 不创建文档

    我正在使用 auth 创建一个新用户 该用户正在工作 然后使用新创建的 uid 创建一个具有相同内容的新文档 const currentUser await auth createUserWithEmailAndPassword email
  • 使用 React-navigation 的 React Native 中的模态窗口

    我在用react navigation在 React Native 中 我想在启动时确定用户是否已登录 如果他 她已经登录 我想打开一个模式窗口 全屏 如何最好地做到这一点 我在反应导航文档中找不到有条件显示屏幕的任何内容 看 你需要改变m
  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • 如何使用 Firestore 中的对象数组更新 Field 中的特定对象? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 所以我有一个emojiCounter字段用于存储对象数组 例如 emojiCounter emoji
  • 有没有办法显示嵌套在 Grid 组件内的 Material-UI 抽屉?

    我正在使用 Material UI 创建一个 Web 应用程序 主页分为 3 个网格 每个网格有一个height of 500px 我想在中间网格内显示一个带有一些操作选项的抽屉 那可能吗 到目前为止 我只能在整个屏幕上显示它 这是我的主要
  • Recoil 中的动态原子键

    我正在尝试创建一个动态表单 其中表单输入字段是根据 API 返回的数据呈现的 由于atom需要有一个唯一的键 我尝试将它包装在一个函数中 但是每次我更新字段值或重新安装组件 尝试更改选项卡 时 我都会收到一条警告 我在这里做了一个小的运行示
  • ./types 的大小写与底层文件系统不匹配

    所以我从 eslint 收到了一些奇怪的警告 types 是流类型文件 我认为 eslint 将 checkbox 读取为小写 而实际上它是 Checkbox 大写 C I try git mv casesensitive tmp git
  • Typescript:如何从react-bootstrap导入特定组件

    早些时候我的应用程序位于ReactJs React bootstrap 现在我正在使用Typescript ReactJs React bootstrap 为了减少生产应用程序的大小 之前我曾经使用 导入react bootstrap组件i
  • 哪种反应钩子与 firestore onsnapshot 一起使用?

    我在我的 React Native 应用程序中使用了大量的 Firestore 快照 我也在使用 React hooks 代码看起来像这样 useEffect gt someFirestoreAPICall onSnapshot snaps
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒
  • 将 sass 变量导入 gatsby 组件中引用的第二个 Sass 文件

    我正在使用 Gatsby 构建一个静态站点项目 我已经成功安装了 gatsby sass 插件并让 sass 正常工作 但是 我无法将自定义 sass 变量文件正确导入到其他组件 sass 文件中 下面是我的文件夹结构 src compon
  • Facebook SDK 登录/注销 ngrok

    我正在尝试将我正在构建的网络应用程序与 Facebook 集成 Facebook 现在要求所有 API 调用都必须从 https 站点进行 我正在构建的这个应用程序只是为了好玩 所以我使用的是 localhost 我在用着ngrok将我的请
  • 如何在react-select v2中创建optgroup?

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com
  • s3 中托管的静态网站:页面刷新后返回 404

    使用此存储桶策略 Version 2012 10 17 Statement Sid PublicReadGetObject Effect Allow Principal Action s3 GetObject Resource arn aw

随机推荐