使用 Create React App 更改背景图像

Question

我在使用 Create React App 更改背景图片时遇到问题，我通过 props 提供给我的组件。文档说使用导入语法。这可行，但这意味着我必须将每个背景图像硬编码到每个组件。无论如何要动态地执行此操作？

我注意到它也不允许我在导入语法中使用模板文字。我认为那会解决我的问题。

import '../css/Avatar.css';
import photo from "../images/joe_exotic.jpg";


const Avatar = (props) => {

    return (
        <div 
        style={{backgroundImage: `url("${photo}")`}}
        className="avatar">
        </div>
    )
}

export default Avatar;

P.S：我查看了 Whosebug 上关于此的其他文章，但他们没有提供太多帮助。

Answer 1

如果你想避免这种方式，你可以将你的图像放在你的 React 应用程序的 public 文件夹中，然后像这样抓取它们:

import '../css/Avatar.css';

const Avatar = (props) => {

    return (
        <div 
        style={{backgroundImage: `url("/joe_exotic.jpg")`}}
        className="avatar">
        </div>
    )
}

export default Avatar;

Answer 2

希望对你有用。祝你好运。

import '../css/Avatar.css';
import photo from "../images/joe_exotic.jpg";


 const Avatar = (props) => {

 return (
    <div 
    style={{backgroundImage:url(photo)}}
    className="avatar">
    </div>
) }
export default Avatar;

使用 Create React App 更改背景图像

Changing Background image using Create React App

javascript

reactjs

create-react-app