在react的组件中或者scss、less中如何引用url、src(background、backgroundImage)

一、react中如何引用url

1.在组件中使用

1)在线引用:

//1.背景,直接ground
background: 'url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0ae45ef4c3d867223d942451ca19cf26e065bd93004b717f9f6e58af773ea18f) -74px -43px  no-repeat',
//2.img标签src
 <img
   style={{
     width: '134px',
     height: '3px',
     margin: '1px 0 14px 124px',
   }}
   src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3fb56bdddf700e84caec0fbb03b0a8b84af9a004cf78a0f7d1490aa0be6d780b"/>

或者
2)本地引用

import lh from '@/assets/lh.png'
import tlj from '@/assets/tlj.png'
//1.背景,改用backgroundImage
backgroundImage: `url(${lh})`,
//2.img标签src
  <img
     style={{
       width: '134px',
       height: '3px',
       margin: '1px 0 14px 124px',
     }}
     src={tjl} />

2.在css文件中(scss、less等)

代码如下(示例):

//1.背景,直接ground
background: url('~@/assets/meteorologicalcontrol/kqwdbj.png') no-repeat;

至于img组件,因为src与style可以不在一块,可直接在组件中直接引用src={tjl}


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Django模板使用React组件,需要进行以下步骤: 1. 安装React:首先需要在你的项目安装React。你可以使用npm或yarn来安装React。安装完成后,你需要在Django模板引入React的JavaScript文件。 2. 创建React组件:在你的项目创建React组件。你可以使用ES6语法来编写组件,然后使用Babel将ES6语法转换为浏览器可识别的JavaScript代码。 3. 将React组件渲染到Django模板:在Django模板,使用一个占位符来代表React组件。然后,使用JavaScript将React组件渲染到该占位符。 以下是一个简单的例子: 1. 安装React: ```bash npm install react react-dom ``` 2. 创建React组件: ```javascript // mycomponent.jsx import React from 'react'; class MyComponent extends React.Component { render() { return ( <div> <h1>Hello, World!</h1> </div> ); } } export default MyComponent; ``` 3. 将React组件渲染到Django模板: ```html <!-- mytemplate.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Template</title> </head> <body> <div id="my-component"></div> <script src="/path/to/react.js"></script> <script src="/path/to/react-dom.js"></script> <script src="/path/to/babel.js"></script> <script type="text/babel"> import MyComponent from './mycomponent.jsx'; ReactDOM.render(<MyComponent />, document.getElementById('my-component')); </script> </body> </html> ``` 在上面的例子,我们将React组件渲染到了一个名为“my-component”的div元素。我们使用了Babel来将ES6语法转换为浏览器可识别的JavaScript代码。注意,我们在Django模板引入了React和Babel的JavaScript文件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

定位算法工程师

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

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

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

打赏作者

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

抵扣说明:

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

余额充值