React中设置background-image不显示问题及style对象访问咨询

一、背景图不显示的排查与修复 #

1. 资源路径校验 #

你当前用的/assets/mount-fugji.png是绝对路径，需确认：

• 项目public目录下是否存在assets文件夹，且mount-fugji.png文件在其中。React中public目录下的静态资源可直接用绝对路径访问；
• 若图片放在src目录下，必须通过import或require引入，否则webpack无法正确打包资源：

  // 方式1：import引入
  import fugjiImg from './assets/mount-fugji.png';
  // 传递给组件
  <YourComponent img={fugjiImg} />
  
  // 方式2：require引入
  const imageURL = require('./assets/mount-fugji.png').default;
  

2. 背景图语法修正 #

backgroundImage的路径需要用引号包裹，否则部分场景下会解析失败：

style={{ backgroundImage: `url("${props.img}")` }}

3. MIME类型问题处理 #

如果服务器返回的图片MIME类型为text/html：

• 若使用Create React App默认开发服务器，无需额外配置，它会自动处理静态资源的MIME类型；
• 若自定义服务器，需在服务器配置中添加.png对应的image/png类型映射（比如Nginx需在mime.types中配置，Node.js服务器可通过mime-types库设置）。

二、访问style对象的两种方式 #

1. 访问DOM元素的style对象 #

通过useRef获取DOM元素后，直接访问其style属性：

import { useRef, useEffect } from 'react';

function ImageComponent(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      // 打印当前元素的style对象
      console.log(containerRef.current.style);
      // 修改样式示例
      containerRef.current.style.opacity = '0.8';
    }
  }, []);

  return (
    <div 
      ref={containerRef}
      style={{ backgroundImage: `url("${props.img}")` }}
    />
  );
}

2. 访问组件内定义的内联style变量 #

把内联样式抽成单独变量，直接访问该对象：

function ImageComponent(props) {
  const bgStyle = {
    backgroundImage: `url("${props.img}")`,
    width: '300px',
    height: '200px'
  };

  // 访问style对象的属性
  console.log(bgStyle.backgroundImage);
  console.log(bgStyle.width);

  return <div style={bgStyle} />;
}

内容的提问来源于stack exchange，提问作者André Silveira