ReactJS项目中内联CSS设置的背景SVG图片无法加载求助

图片放在public目录的情况 #

如果images文件夹在项目根目录的public文件夹内（即public/images/background.svg），先确认这几件事：

• 文件路径完全正确，文件名（包括大小写）和实际文件一致，SVG本身没有损坏。
• 给<main>元素设置高度，空元素高度为0，背景图肯定无法显示，比如添加minHeight: "100vh"。
• 可以调整内联样式里的backgroundImage写法，加上引号避免潜在解析问题：

const styles = {
  backgroundImage: "url('/images/background.svg')",
  backgroundPosition: "center center",
  backgroundSize: "cover",
  minHeight: "100vh"
}

图片放在src目录的情况 #

要是把images文件夹移到src目录下（比如src/images/background.svg），不能直接写路径引用，必须先导入图片资源再使用，否则webpack无法识别会报错：

// 先导入SVG图片
import backgroundSvg from './images/background.svg';

function Questionnaire(props){
  const styles = {
    backgroundImage: `url(${backgroundSvg})`,
    backgroundPosition: "center center",
    backgroundSize: "cover",
    minHeight: "100vh"
  }

  return(
    <main style={styles}>
    </main>
  )
}

src目录下的资源需要webpack打包处理，直接写字符串路径会被当作普通文本，通过import导入后，webpack会自动分配正确的打包后路径。

最后可以检查下SVG文件本身有没有语法错误，比如标签未闭合、属性拼写错误，这些也会导致图片加载失败。

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