React组件本地背景图片设置及UI容器类实现方法咨询

问题描述 #

我在React的Team组件里尝试给container div设置本地文件夹的图片作为背景，但图片无法显示。现有代码如下：

class Team extends React.Component{
 render(){
 let style = {
 backgroundRepeat: 'no-repeat',
 backgroundImage:'url("../images/Football_Field.png")',
 backgroundSize: '100% 100%',
 backgroundPosition: 'center',
 width: '100%',
 height: '100%',
 border: '2px dashed #333'
 }
 return ( 
 <div className="container" style={style}>
 <i className="fas fa-tshirt"></i>
 </div>
 )
 }
}
export default Team

图片位于/src/images/Football_Field.png，Team组件路径为/src/components/Team。另外想咨询如果使用UI容器类该如何实现？

解决方案 #

一、修复本地图片路径问题 #

在React项目中，直接用相对字符串路径设置backgroundImage容易因为webpack的打包机制出错，推荐两种可靠的解决方式：

方式1：导入图片资源后使用（最推荐）

先通过import引入图片资源，再将导入的变量作为路径传入url()，这样webpack会正确处理资源并生成正确的打包路径：

// 注意相对路径：从/src/components/Team到/src/images，需要回到上级目录再进入images
import FootballField from '../images/Football_Field.png';

class Team extends React.Component{
 render(){
 let style = {
 backgroundRepeat: 'no-repeat',
 backgroundImage: `url(${FootballField})`, // 使用模板字符串插入图片变量
 backgroundSize: '100% 100%',
 backgroundPosition: 'center',
 width: '100%',
 height: '100%',
 border: '2px dashed #333'
 }
 return ( 
 <div className="container" style={style}>
 <i className="fas fa-tshirt"></i>
 </div>
 )
 }
}
export default Team

方式2：使用public文件夹绝对路径

如果把图片移到项目根目录的public/images文件夹下（没有的话直接新建），可以直接用绝对路径引用，这种方式不需要import，适合不需要webpack处理的静态资源：

backgroundImage: 'url("/images/Football_Field.png")'

二、使用UI容器类实现背景图 #

如果偏好通过CSS类而不是内联样式来控制背景，有两种常见实现方式：

方式1：普通CSS类

1. 在Team组件目录下新建Team.css文件，编写背景样式：

.container-bg {
  background-repeat: no-repeat;
  /* 相对路径是从Team.css到/src/images的路径，和组件里的相对路径一致 */
  background-image: url('../images/Football_Field.png');
  background-size: 100% 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  border: 2px dashed #333;
}

2. 在组件中引入CSS并添加类名：

import './Team.css';

class Team extends React.Component{
 render(){
 return ( 
 <div className="container container-bg"> {/* 同时保留原container类，新增背景类 */}
 <i className="fas fa-tshirt"></i>
 </div>
 )
 }
}
export default Team

方式2：CSS Modules（避免样式冲突）

如果项目使用CSS Modules（Create React App默认支持），可以用模块化CSS来避免样式污染：

1. 新建Team.module.css文件：

.containerBg {
  background-repeat: no-repeat;
  background-image: url('../images/Football_Field.png');
  background-size: 100% 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  border: 2px dashed #333;
}

2. 在组件中引入并使用：

import styles from './Team.module.css';

class Team extends React.Component{
 render(){
 return ( 
 <div className={`container ${styles.containerBg}`}>
 <i className="fas fa-tshirt"></i>
 </div>
 )
 }
}

内容的提问来源于stack exchange，提问作者Sean