使用umiJs搭建前端项目添加背景图片

最新推荐文章于 2024-05-15 09:46:22 发布
最新推荐文章于 2024-05-15 09:46:22 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： 前端 react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38783718/article/details/123165691
版权

前言：有关 umiJs 的文章比较少，翻了好多文章也没找到。本人小白一枚，写这个文章是为了做记录，同时也希望对遇到同样问题的同学有帮助。

1. 技术栈

umiJs + TypeScript + antd + React

2. 修改方法

修改全局样式的文件名为 global.less，我们可以在浏览器界面使用 F12 打开检查元素窗口，找到对应布局的标签。由于 React 构建的是单页面应用，直接找 <div id='root'>...</div>下的标签，如下图所示，找到包含我们所展示的界面的组件的父标签。

要插入全局背景对应标签
找到该标签后，在global.less文件中使用类选择器，加入背景图的 url，示例代码如下：

// global.less
.ant-layout {
最低0.47元/天 解锁文章
菜鸟八号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp微信小程序的background-image使用
前端程序员、项目经理、人工智能博主
12-03 5443
我们知道微信小程序的图片不能使用本地图片，而必须使用网络图片 <view class="top-wrapper" style="backgroundImage:url(http{{imgURL})}"> 在data绑定imgURL:require(‘static/image/order_detailbj.png’) 如上我使用的是通过view标签设置图片背景的 如果我们想通过image标签也可以 <image :src='http+imgURL'></image> 有
给image元素设置背景图
weixin_44433499的博客
07-15 1957
image { width: 100%; height: 350px; z-index: 999; background: url(../../static/sxpic.png) no-repeat; background-size: 370px 240px; }
umijs中如何引用svg图片
菜鸟博客
04-09 3945
最近遇到需求在umijs中引用svg图片。下面说说实现方法。 先看效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQn5hMt3-1586361572751)(https://store.xuehuayu.cn/store/20200408/2020-04-08_215349.png)] 分析 查看umijs文档中，使用ReactComponent来引用sv...
2024年前端最新vue3的three场景加入背景图_vue3 threejs scene 设置背景图片，oppoWeb前端面试题
最新发布
2401_84411018的博客
05-15 348
1)ajax请求的原理/ 手写一个ajax请求？4)ajax传递中文用什么方法？3)ajax异步与同步的区别？
【实战踩坑】umi+react+ts项目引入图片提示找不到该模块
种一棵树最好的时间是十年前，其次是现在。
11-10 652
引入图片提示找不到该模块。引入的图片是 .jpeg 格式的，把图片后缀改成 .png 就可以了。至于为什么会识别不了 jpeg 格式，还待研究。先记一笔，好记性不如烂笔头。
react中引入大量图片
microcosm1994的博客
06-20 2200
原文地址：React 引入大量本地图片 const requireContext = require.context('../img', true, /^\.\/.*\.png$/) const images = requireContext.keys().map(requireContext)
基于umijs框架的前端项目
04-10
《umijs框架在前端项目中的应用深度解析》 umijs框架是阿里巴巴开源的一款强大的前端应用框架，它以其模块化、插件化的设计理念，为开发者提供了高效、灵活的项目构建和管理工具。在这个名为"itcast-haoke-manage-...
基于 umijs + electron + ant-design-pro 的项目模板开发代码
03-12
1. **项目初始化与结构**：学习如何使用`umijs`初始化项目，了解项目的基本目录结构，包括src、public、.umirc.js或config.ts等关键配置文件的作用。 2. **umijs配置与插件**：理解`.umirc.js`或`config.ts`中的...
使用umi脚手架 创建项目 详细教程
01-07
 umi 通过create-umi 来提供脚手架能力 创建项目有两种形式, 一种是是命令行 一种是使用GUI 首先介绍命令行创建项目 执行以下命令开始创建项目 npm creat umi 可以选择以下几个项目  project，通用项目脚手架...
create-umi:使用命令行创建一个UmiJS应用程序
04-29
创建米使用命令行创建一个UmiJS应用程序/插件/块/库。用法$ yarn create umi [appName]样板ant-design-pro pro-使用仅布局的ant-design-pro样板创建项目，与umi block一起使用。 app -使用简单的样板创建项目，支持...
基于umi+antd-mobile的移动端项目模板
02-22
antd-mobile遵循Ant Design的设计哲学，提供了丰富且易于使用的组件，如按钮、表单、导航栏、列表等，帮助开发者快速搭建界面，保持应用的一致性和专业性。在"基于umi+antd-mobile的移动端项目模板"中，这些组件可以...
打开侧边栏后实现除侧边栏外背景颜色动态变化
weixin_44940078的博客
05-27 355
在网上查阅后使用@keyframes定义颜色变化 在style样式中定义如下，使背景色2s由白色#fff变化为淡灰黑色#DDDDDD @keyframes bgcolor{ 0%{ background-color: #fff; } 100%{ background-color: #DDDDDD; } } 其中bgcolor是自己取得名字，可以定义更多的百分号实现想要的动态颜色变化 给想要改变颜色的区域绑定样式，如我给class为isside
CSS实现响应式全屏背景图
dianchamian8747的博客
03-14 4338
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片...
Ant Design Pro引入自定义主题及在主题文件中配置背景图片
热门推荐
虚怀若愚
12-16 1万+
文章目录前言分析修改和引入主题文件在主题文件中配置背景图片 前言 开发环境：Ant Design Pro: 2.0 官方文档：定制主题 Ant Design Pro官方提供了黑色主题和阿里云控制台主题，可以参考文档直接使用。 项目需求： 前端主题根据应用场景灵活匹配，在一个主题文件里能修改所有属性。 背景图片可以在主题文件中定制。 分析 2.0版本的Ant Design Pro默认主题路...
关于antd-pro、Umi中ejs文件图片引入显示404问题
实事求是，艰苦奋斗，小小的梦想，终将实现。
03-09 1428
问题描述 页面写法 浏览器问题 解决方案 <img src="<%= context.config.publicPath +'图片命.png'%>" width="32" style="margin-right: 8px" /> <img src="<%= context.config.publicPath +'login.png'%>" width="32" style="margin-right: 8px" />
less中引入背景图片的方法
weixin_46419373的博客
04-19 2495
注意点:记得加~号,只使用@会报错 background-image: url("~@/assets/imgs/tableSelect.png");
umi+dva+antd后台管理系统(4)---展示数据
王阿星的博客
01-09 1126
废话不多说，今天事多，希望标题功能一上午能写完 ，开干！ ok，先修改了一下界面，展示一下我要实现的功能。 如图： 1. antd找了一个table表格 2. 发网络请求填数据 定义一个发请求的方法 //获取商品列表 export const list =()=>{ return instance.GET('/api/detail') } 在componentDi...
umi框架：react优雅引入阿里巴巴矢量图标库
ilovewangjie990502的博客
07-01 1205
进入阿里巴巴矢量图标库，将选入的图标放入购物车。 选择添加至项目，没有项目可新建项目。 封装一个自定义Icon组件，这里推荐React使用函数形式： import React from 'react'; import classnames from 'classnames'; import propsTypes from 'prop-types'; const scriptElem = document.createElement('script'); // 在上方复制的链接放在这里 scriptEl
前端项目中react-umi框架的简单用法
lzfengquan的博客
01-26 6204
做完最近项目目发现umi是个好东西，但是没有用过，（目前写的react项目时原生的写法）现在尝试用umi做个简单的项目页面，如果大家有更好的信息技术可以咱们交流一下共同提高。 umi官网地址 ：https://umijs.org/zh-CN/docs/getting-started dva地址： https://dvajs.com/ 先简单了解一下什么是umi： Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能
如何在umijs项目中添加webpack配置
04-28
在umijs中添加webpack配置可以通过在.umirc.js文件中修改webpack配置来实现。例如，可以在.umirc.js文件中添加如下代码来自定义webpack配置： ```javascript export default { chainWebpack(config, { webpack }) { // 添加自定义webpack配置 config.merge({ // ... }); }, }; ``` 其中，`config.merge()`方法可以用来合并自定义的webpack配置。更多详细的配置可以参考umijs官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值