在React中更改背景图片的URL

Question

我正在尝试通过访问DOM并更改css属性来更改背景图片，如下所示：

Base price equals: 0.0
Total price equals: 0.0
null

该图像将不会加载 但是当我将img路径放在CSS中时，img路径就不同了：

如果插入相同的路径，则该路径为static / media ..，则DOM操作有效。 这是文件的顺序：

Answer 1

CSS图像中的相对URL是在样式表的位置（将是嵌入式CSS的网页本身的URL）和图像的URL之间计算的。

它们与以下两者均无关：

• JS文件的网址
• JS文件在文件系统上的位置
• 图像在文件系统上的位置（用于确定其获取URL的范围除外）

由于您使用的是React，因此您需要先import图像，然后使用其导入的值来获取URL。

您应该更改逻辑以根据 state 设置值，并避免直接进行DOM操作。

import Default from '../img/default.jpg';
import Kaunas from '../img/kaunas.jpg';


const AnotherWeatherMap = (props) => {
    const [background, setBackground] = useState(Default);

    const css = {
        backgroundImage: `url(${background})`
    };

    return (<div style={css}>
        <button onClick={ () => setBackground(Kaunas) }>Change background<button>
    </div>);
};