在使用 Create React App 引导的元素中,在我的 public
文件夹中,我有一个 assets
文件夹,其中包含文件 logo512.jpg
。
当我像这样在组件中引用文件时
<div>
<img src='/assets/logo512.jpg'/>
</div>
我一切正常。但是,当我在 CSS 文件中为同一组件引用同一文件时,如下所示:
background {
background-image: url('assets/logo512.jpg');
}
然后错误 Can't resolve '/assets/logo512.jpg' in DIRECTORY_OF_COMPONENT/assets/logo512.jpg
请注意,DIRECTORY_OF_COMPONENT 不是公用文件夹,而是 CSS 文件所在的文件夹。如何创建它以便 url 引用公用文件夹?
下面是完整的代码以及我的文件结构:
// HomePage.js
import React from 'react';
import 'tachyons';
import './HomePage.css';
function HomePage() {
return (
<div className="background tc">
<div>
<img src='/assets/logo512.jpg'/> //this works
</div>
</div>
);
}
export default HomePage;
// HomePage.css
.background {
height: 100%;
display: flex;
align-content: center;
justify-content: center;
background: url('/assets/logo512.jpg'); //this does not work
}
最佳答案
更新:
案例 1:
如果您的图片在公用文件夹中。如果您在 public
文件夹中使用 assets
文件夹,那么代码应该可以工作。
所有三种情况的 Codesandbox 演示: https://codesandbox.io/s/images-not-loaded-hkzq1
案例 2:
如果您想使用 public
文件夹以外的图片,您需要先将图片导入您的 React 元素。 (确保路径和图像正确)。
import MyImage from "./assets/logo512.jpg"
然后在src
属性中使用。
<img src={MyImage}/>
案例 3:当使用 CSS 在 block 级元素上设置图像时:
.background {
height:200px; /* Make sure height of the div is given for image to be within*/
background-image: url("assets/logo512.jpg");
}
这应该可以正常工作(前提是您的 CSS 文件的相对路径是正确的)
注意:对于 SVG 图像,React 提出了一种基于组件的方式,我们通过使用 ReactComponent
导入我们的 SVG 作为组件使用。
import { ReactComponent as Logo } from './logo.svg';
return(<Logo/>)
关于javascript - 无法从 CSS Create React App 中的公用文件夹导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65640493/