React中图片引入的几种方式

_zhiqun

于 2018-10-16 19:15:06 发布

阅读量3.5k

点赞数

文章标签： react react图片引入

本文链接：https://blog.youkuaiyun.com/weixin_42470791/article/details/83095916

版权

本文介绍了在项目中导入和使用TypeScript图标资源的两种常见方式。方式1：使用import语句从指定路径导入图标；方式2：通过require函数加载图标资源。随后展示了如何在React组件中利用这些图标资源进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式1

import tsIcon from '../images/typescript.jpeg';

方式2

const tsIcon = require('../images/typescript.jpeg');

使用方式1

<img src={tsIcon} alt="" />

使用方式2

const styles = { test: { background: `url(${tsIcon}) no-repeat center` }}render() { return ( <div style={styles.test}></div> )}

下面是小案例图片
在这里插入图片描述