react 开发移动端h5项目 图片打包不显示 可以这样处理（转换图片为base64）

最新推荐文章于 2023-07-14 16:22:21 发布
最新推荐文章于 2023-07-14 16:22:21 发布
阅读量954 收藏 1
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/106308507
版权

项目做好了，准备打包构建，发现本地引用的图片资源，在打包后未能生成，导致部署后，图片未能显示出来

方法就是，将图片转换成base64编码

我们只需要到http://tool.chinaz.com/tools/imgtobase 这个站点，上传我们需要转换成base64的图片，将图片转成base64，替换img标签的src属性值为base64即可，这样子打包就能将正确的图片引用打包进去

 

hzxOnlineOk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-board:React H5 移动端项目模板
05-26
从零搭建 React 开发 H5 模板项目创建创建项目文件夹mkdir react-democd react-demonpm init -y依赖安装yarn add react react-domyarn add webpack webpack-cli webpack-dev-server webpack-mergebabel-core babel-...
react项目打包遇到的坑
Lval的博客
10-17 1915
页面空白 解决方法： package.json文件中加上一个属性：“homepage”:"./" 路由不能正常跳转 原因： 出现这个问题的原因应该是history的模式没有用对了，要想解决这个问题，要把history变成hash模式 解决方法： 把引入路由那里的BrowserRouter 换成 HashRouter BrowserRoute引入打包后路由不能跳转： HashRouter引入打包...
React中的wangeditor富文本编辑器
KisJLLLLLL的博客
07-14 539
react中的wangeditor富文本编辑器，文件上传的相关配置
react如何使用base64图片
热门推荐
hahahhahahahha123456的博客
06-07 1万+
原图如下：var baseImg='data:image/png;base64,图片base64编码'  <img src={img_base} style={{ width: 130, height: 'auto', borderRadius: 30,margin:'0 auto',display:'block'}} />使用react-base64后效果图如下：so easy!...
vue.config.js打包，部分图片没转base64图片问题解决
xiuxiu93的博客
08-06 1777
自己使用vue-cli写了个组件库，打包之后使用发现部分图片没有自动转base64图片，导致图片显示的时候报404的错误。查了资料发现打包规则忽略了小于10k的图片，需要自己手动配置下图片转义规则，配置如下： chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Ob
react打包后图片丢失_webpack实战第二篇（搭建react开发环境）
weixin_40008969的博客
11-19 121
第一篇基础部分可以参考上一篇文章林海：webpack实战第一篇（基础部分）​zhuanlan.zhihu.com第一篇已经教会我们搭建了webpack的基础环境，这一篇我们来搭建一个基于react的项目1.1 搭建react开发环境react相关库npm i react react-dom 解析react的库 npm i -D @babel/preset-react 此时，我们的webpack把j...
react-mobile:基于react的移动端H5框架
05-08
基于react + webpack 的单页面移动端应用,不依靠create-react-app脚手架 项目结构 |-- build webpack配置文件夹 |-- utils.js 所用方法 |-- webpack.config.js 公共配置 |-- webpack.dev.js 开发配置 |-- ...
react移动端H5点餐项目源码首页，商品列表，商品详情，商品购物车汇总.zip
02-03
这个React移动端H5点餐项目源码是一个基于React框架构建的Web应用，旨在提供一个功能齐全的在线点餐系统。项目包含多个关键组件和功能，适用于iPhone、主流Android设备以及各种Web浏览器。以下是对该项目各个组成...
react quill中图片上传由默认转成base64改成上传到服务器的方法
12-13
在使用React Quill这个富文本编辑器时，我们常常会遇到一个问题：默认情况下，它将图片转换为Base64编码存储在文本中。然而，Base64格式的图片在文件大小上比原始图像文件要大，这可能导致提交到后端的数据过于庞大...
reactH5:react 全家桶 实现react 移动端项目
05-29
React 移动端下拉刷新： 前提： 网上有很多针对vue封装的移动端UI组件库，但react的移动端UI组件库貌似只有Google的 material UI和阿里的 ant design mobile。阿里的下拉刷新又不符合项目的风格,只能 自己实现了。 ...
React项目本地环境正常显示，打包部署服务器图片不显示问题
objctly的博客
04-04 5758
React项目部署服务器，图片不显示
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3081
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
react引入图片不显示
weixin_49662044的博客
11-18 1966
2.通过import或者require方式引入,通过赋值的方式显示。1.检查地址是否正确，如果不正确，换成正确的地址。使用react开发时，引入的图片在浏览器不显示。2.在react中，不支持直接引入。
碰到h5中背景图片无法显示的莫名其妙的问题
weixin_43236913的博客
07-22 3260
发现问题 使用背景图片渲染头像，但是发现有些头像能显示，有些就是空白的，看了一下，不显示的头像是因为background-image属性莫名其妙失效了。。。 这种不能显示： 这种就能显示： 对比一下，导致background-image属性失效的图片地址里有空格，那不是简单，把地址里的空格去掉，用正则表达式啊！ <div class="avatar" :style="{backgroundImage: 'url('+detailInfo.fdImage.thumbnailUrl.replace
解决vue打包后h5-web端背景和icon不显示的问题
ada的博客
07-31 566
https://www.cnblogs.com/ada9527/p/15083269.html
uniapp H5打包后本地图片无法显示问题
anjignren的博客
07-22 4501
uniapp 打包H5 发现本地图片看不到了，该如何解决呢
uni-app开发h5 发布后背景图片找不到路径
weixin_42998230的博客
12-14 4824
uni-app开发h5 发布后背景图片找不到路径
React Native 加载base64图片
weixin_34061555的博客
07-27 2016
const {base64Image } = this.props; let baseImg=`data:image/png;base64,${base64Image}`; <Image style={styles.rightImage} source={{uri:baseImg}}/&gt...
base64图片压缩并转换二进制流
我乃小神神的博客
07-28 729
base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWi.
umi+antd design react搭建移动端web项目
最新发布
09-08
umi 是一个基于 react 的前端开发框架，它提供了一些方便的工具和规范，帮助我们更快地搭建和部署移动端 web 项目。而 antd design 是一个优秀的 UI 组件库，它提供了丰富的组件，能够满足我们在移动端 web 项目中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值