一、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}


Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐