无法使用Webpack将base64图像导入React组件

数字灾难

我在图像文件夹中创建了一个b64Images.js文件。在它里面,我有以下内容:

export const placeholder = "data:image/png;base64,longb64string"

我正在尝试使用以下方式将其导入到我的React组件之一中:

import { placeholder} from '../../../images/b64Images.js'

它能够找到文件,但出现错误:

Module parse failed: fullpath/b64Images.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.

这只是一个js文件,我的webpack已经配置好了。导入我的减速器功能没有任何问题。

数字灾难

答案是忘记自己转换图像,然后安装此软件包。

https://github.com/antelle/base64-loader

import { placeholder} from '../../../images/b64Images.js'

变成

import placeholder from 'base64!../../../images/image.png'

悲伤变成幸福

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法使用java将图像转换为base64

无法使用 docx 将 base64 编码的图像添加到 Word 文档

无法使用cassandra驱动程序将base64图像数据存储在Cassandra中

React Native将base64图像保存到相册

使用Java将图像转换为base64

使用pyfpdf将Base64图像插入pdf

使用 webpack 5 将 SVG 导入为 React 组件

无法解码base64编码的图像

如何将图像 base64 url 传递给同级组件

使用循环解码base64图像

使用Laravel发送Base64图像

使用javascript获取base64图像

禁用vue-cli Webpack编码图像base64

使用Symfony和VichUploader将base64图像转换为图像文件

将值 Base64 保存到图像 PNG 使用干预图像 Laravel 存储

在 Android 上的 React-Native 中压缩 base64 编码的图像无法识别“数据”协议

无法将WKWebView中的base64图像发送到JavaScript页面

无法在Ionic 4中将base64转换为图像路径

由于Base64错误,无法将图像上传到数据库

如何将 PNG 图像转换为 base64 - React Native

通过Node将base64图像从react-webcam上传到cloudinary

React.js:如何使用 react-admin 的 ImageField 显示 base64 图像

如何使用 Javascript(使用 base64 数据)将图像保存到 iPhone?

无法在img标签中使用来自CSS的base64图像

在React Native中为应用程序使用base64图像字符串会崩溃

使用 React-Native 中的其他数据从以 base64 存储的 JSON 渲染图像

使用 Axios 和 React Native 上传 base64 图像到服务器

使用PL / SQL将base64图像解码为BLOB

使用Java将Base64编码的图像上传到Amazon s3