3 回答

TA貢獻1817條經(jīng)驗 獲得超14個贊
在內(nèi)聯(lián)CSS中只需添加url(...)如下內(nèi)容
import React from "react";
import ReactDOM from "react-dom";
const customStyle = {
color : "red"
}
const dStyle = {
backgroundImage : "url(https://wallpapercave.com/wp/wp2771916.jpg)",
}
ReactDOM.render(
<div style = {dStyle}>
<h1 style = {customStyle}>Hello World!
</h1>
</div>, document.getElementById("root"));

TA貢獻1831條經(jīng)驗 獲得超4個贊
解決方案一:
<div style={{ backgroundImage: `url(require("https://wallpapercave.com/wp/wp2771916.jpg"))` }}>
解決方案2:
import React from "react";
import Background from 'https://wallpapercave.com/wp/wp2771916.jpg';
import ReactDOM from "react-dom";
const customStyle = {
color : "red"
}
const dStyle = {
backgroundImage: "url(" + { Background } + ")" // unable to view this image as background-image
}
ReactDOM.render(
<div style = {dStyle}>
<h1 style = {customStyle}>Hello World!
</h1>
</div>, document.getElementById("root"));

TA貢獻1859條經(jīng)驗 獲得超6個贊
這將有助于:
首先將 imageUrl 存儲在變量中,然后使用style屬性,如下所示:
const TestingImage = () => {
const imageUrl = "https://wallpapercave.com/wp/wp2771916.jpg";
return (
<>
<div
style={{
backgroundImage: `url(${imageUrl})`,
height: "400px",
}}
></div>
</>
);
};
添加回答
舉報