React 中引入本地图片和背景图片的方法

miss_June

于 2018-07-16 17:47:09 发布

阅读量2.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： react react引入本地图片

本文链接：https://blog.csdn.net/AliceWu_1111/article/details/81069020

react 同时被 2 个专栏收录

4 篇文章

订阅专栏

react引入本地图片

1 篇文章

订阅专栏

本文详细介绍在Webpack项目中如何高效地引入图片资源，包括使用import语句和直接引用的方法，以及在CSS样式中作为背景图片的引入技巧。

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

1、在webpack.config中找到相应的图片路径的缩写配置（不是所有的项目都有缩写配置的，在大型项目中为了书写方便进行缩写配置）
这里写图片描述

所以我的图片都在缩写路径 Image 里面

2、接下来就要说引入图片的方式了

如果不是背景图片的话，有以下两种方式
①直接在内部引用

②使用import方法

import img from 'Image/weixin_erweima.png' //引入图片的路径
<img src={img} />     //变量的方式引入图片，记得用{}大括号来进行引用

2、如果是背景图片原理和上面是一样的
①直接定义引入

//在render()内定义
const bgGround={
    display:'inline-block',
    height: '40px',
    width:'40px',
    background: `url(${require("Image/weixin_erweima.png")})`
}

②使用import方法

import img from 'Image/weixin_erweima.png';
//在render()内定义
const bgGround = {
     display:'inline-block',
     height: '40px',
     width:'40px',
     backgroundImage: 'url(' +img + ')'//图片的路径
   };

//最后在return中进行书写
 <p>
   <span style={bgGround}></span>家乐园餐厅
 </p>