脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react 引入图片

react 项目中引入图片的几种方式

 更新时间：2021年06月02日 17:14:02   作者：jared.wang  
本文主要介绍了react 项目中引入图片，本文详细的介绍了几种方法，需要的朋友们下面随着小编来一起学习学习吧

img标签引入图片

因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片

我们可以像引入模块一样引入图片

import img from './../../../../asset/img/user.png'

需要用下面的方式引入

<img src={require('../images/picture.png')} alt="标签"/>

背景图片引入

1 第一种就是常规的 新建一个css文件，然后就可以直接写css语法了

.img {
   background: url('../images/picture.png') 0 0 no-repeat;
}

2 第二种就是在react组件中通过变量的方式引入,然后直接将变量赋值给img标签

// 引入图片文件
import bg from '../images/bg.png'
// 通过字符串拼接的方式定义一个样式对象
const imgStyle = {
  width: '100%',
  height: '500px',
  backgroundImage: 'url(' + bg + ')',
  backgroundPosition: 'center 0',
  backgroundSize: '2045px 472px',
  backgroundRepeat: 'no-repeat'
}
class Home extends Component {
 constructor () {
  super (props)
 }
 render() {
  // 最后直接将变量赋值给标签
  <div style="imgStyle">
   ...
  </div>
 }
}

require

我们也可以将相对路径用require包裹之后直接赋给src，就像在vue中一样。

<img width="100" height="100" src={require('./../../../../asset/img/user.png')} alt="" className={'user-img'}/>

**注意：**这里有个问题，因为file-loader库的版本不同，这里有些细微差别。高版本的file-loader库esModule默认为true，require返回一个ES模块而不是字符串路径。而这个ES模块的default属性为字符串路径，所以应该这样写：

<img width="100" height="100" src={require('./../../../../asset/img/user.png').default} alt="" className={'user-img'}/>

我们也不要去纠结我们的file-loader版本到底是多少，当我们直接使用require还是无法正常显示图片的时候，我们在require后面加个.default即可

到此这篇关于react 项目中引入图片的几种方式的文章就介绍到这了,更多相关react 引入图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • ReactNative实现弧形拖动条的代码案例

    ReactNative实现弧形拖动条的代码案例

    本文介绍了ReactNative实现弧形拖动条,本组件使用到了react-native-svg和PanResponder,结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • React中组件优化的最佳方案分享

    React中组件优化的最佳方案分享

    React组件性能优化可以减少渲染真实DOM的频率,以及减少VD比对的频率,本文为大家整理了一些有效的React组件优化方法,需要的小伙伴可以参考下
    2023-12-12
  • React router动态加载组件之适配器模式的应用详解

    React router动态加载组件之适配器模式的应用详解

    这篇文章主要介绍了React router动态加载组件之适配器模式的应用 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-09-09
  • React Native之ListView实现九宫格效果的示例

    React Native之ListView实现九宫格效果的示例

    本篇文章主要介绍了React Native之ListView实现九宫格效果的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 解决React报错Parameter 'props' implicitly has an 'any' type

    解决React报错Parameter 'props' implicitly&nb

    这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 详解在React里使用

    详解在React里使用"Vuex"

    本篇文章主要介绍了详解在React里使用"Vuex"，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React文件名和目录规范最佳实践记录(总结篇)

    React文件名和目录规范最佳实践记录(总结篇)

    React在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范，介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能，感兴趣的朋友一起看看吧
    2022-05-05
  • react-router v6实现动态路由实例

    react-router v6实现动态路由实例

    这篇文章主要为大家介绍了react-router v6实现动态路由实例详解，<BR>有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React 路由react-router-dom示例详解

    React 路由react-router-dom示例详解

    一个路由就是一个映射关系(key:value),key为路径, value可能是function或component,本文给大家介绍React 路由react-router-dom详解,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • react实现浏览器自动刷新的示例代码

    react实现浏览器自动刷新的示例代码

    这篇文章主要介绍了react实现浏览器自动刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论