blocks|key|4398424|text|backgroundImage属性内的大括号错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398425|您可能正在使用带有图像文件加载器的webpack，因此背景应该已经是一个字符串：backgroundImage:+"url("+%2B+Background+%2B+")"|offset|length|style|CODE|4398426|您也可以使用如下所示的ES6字符串模板来达到同样的效果：|4398427|backgroundImage:+`url(${Background})`|code-block|syntax|javascript|4398428|entityMap^0|0|14|16|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The curly braces inside backgroundImage property are wrong. 

Probably you are using webpack along with image files loader, so Background should be already a String:
<code>backgroundImage: "url(" + Background + ")"</code>

You can also use ES6 string templates as below to achieve the same effect:

<pre><code>backgroundImage: `url(${Background})`
</code></pre>

blocks|key|4398486|text|设置任意图像全屏的内联样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398487|style={{++
++backgroundImage:+"url("+%2B+"https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"+%2B+")",
++backgroundPosition:+'center',
++backgroundSize:+'cover',
++backgroundRepeat:+'no-repeat'
}}|code-block|syntax|javascript|4398488|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Inline style to set any image full screen:

<pre><code>style={{ 
 backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&amp;cs=tinysrgb&amp;h=350" + ")",
 backgroundPosition: 'center',
 backgroundSize: 'cover',
 backgroundRepeat: 'no-repeat'
}}
</code></pre>

blocks|key|4398436|text|如果您使用的是ES5+-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398437|backgroundImage:+"url("+%2B+Background+%2B+")"|code-block|syntax|javascript|4398438|如果您使用的是ES6+-|4398439|backgroundImage:+`url(${Background})`|4398440|基本上，删除不必要的花括号，同时为backgroundImage属性增加价值将会起作用。|4398441|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you are using ES5 -

<pre><code>backgroundImage: "url(" + Background + ")"
</code></pre>

If you are using ES6 -

<pre><code>backgroundImage: `url(${Background})`
</code></pre>

Basically removing unnecessary curly braces while adding value to backgroundImage property works will work.

blocks|key|4398966|text|它对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398967|++import+Background+from+'../images/background_image.png';
++++
++<div+className=...
+++++++style={{
++++++++++++++background:+`url(${Background})`,
++++++++++++}}
++++>...</div>|code-block|syntax|javascript|4398968|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It works for me:
<pre><code> import Background from '../images/background_image.png';
 
 &lt;div className=...
 style={{
 background: `url(${Background})`,
 }}
 &gt;...&lt;/div&gt;
</code></pre>

blocks|key|4398860|text|对我来说，最有效的方法就是这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398861|style={{+backgroundImage:+`url(${require("./resources/img/banners/3.jpg")})`+}}|code-block|syntax|javascript|4398862|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For me what worked is having it like this

<pre><code>style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}
</code></pre>

blocks|key|4398777|text|您可以改用模板文字(用反划线：...括起来)。对于如下所示的backgroundImage属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4398778|backgroundImage:+`url(${Background})`|code-block|syntax|javascript|4398779|entityMap^0|F|3|U|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You can use Template Literals (enclosed with back-tick: `...`) instead. For <code>backgroundImage</code> property like this:
<pre><code>backgroundImage: `url(${Background})`
</code></pre>

blocks|key|4399003|text|如果是ReactJS，则为local文件。试一试|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4399004|import+Image+from+"../../assets/image.jpg";

<div
style={{+backgroundImage:+'url('+%2B+Image+%2B+')',+backgroundSize:+'auto'+}}
>Hello
</div>|code-block|syntax|javascript|4399005|这就是具有内联样式的ReactJS的情况，其中Image是您必须使用路径导入的本地文件。|4399006|entityMap^0|D|5|0|0|A|7|N|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

For a <code>local</code> File in case of ReactJS.
Try
<pre><code>import Image from &quot;../../assets/image.jpg&quot;;

&lt;div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
&gt;Hello
&lt;/div&gt;
</code></pre>
This is the case of <code>ReactJS</code> with inline styling where <code>Image</code> is a local file that you must have imported with a path.

blocks|key|4398573|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398574|style={{+backgroundImage:+`url(require("path/image.ext"))`+}}|code-block|syntax|javascript|4398575|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this:

<pre><code>style={{ backgroundImage: `url(require("path/image.ext"))` }}
</code></pre>

blocks|key|4398676|text|试试这个在我的情况下行得通|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398677|backgroundImage:+`url("${Background}")`|code-block|syntax|javascript|4398678|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this it worked in my case
<pre><code>backgroundImage: `url(&quot;${Background}&quot;)`
</code></pre>

blocks|key|4398825|text|有时你的SVG会被React内联，所以你需要在它周围加上引号：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398826|+++++backgroundImage:+`url("${Background}")`|code-block|syntax|javascript|4398827|否则它就是无效的CSS，浏览器开发工具根本不会显示你已经设置了背景图像。|4398828|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Sometimes your SVG will be inlined by React so you need quotes around it:
<pre><code> backgroundImage: `url(&quot;${Background}&quot;)`
</code></pre>
otherwise it's invalid CSS and the browser dev tools will not show that you've set background-image at all.

blocks|key|4398712|text|只需将所需内容添加到文件或url|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398713|<div+style={
+++{
++++++backgroundImage:+`url(${require("./path_local")})`,++++++
+++}
}
>|code-block|syntax|javascript|4398714|或在css+base64图像中设置，如|4398715|div+{
++background:
++++url('data:image/gif;base64,R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA')
++++no-repeat
++++left+center;
}|4398716|您可以使用https://www.base64-image.de/进行转换|offset|length|4398717|entityMap|0|LINK|mutability|MUTABLE|url|https://www.base64-image.de/^0|0|0|0|0|5|S|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Just add required to file or url
<pre><code>&lt;div style={
 {
 backgroundImage: `url(${require(&quot;./path_local&quot;)})`, 
 }
}
&gt;
</code></pre>
Or set in css base64 image like
<pre><code>div {
 background:
 url('data:image/gif;base64,R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA')
 no-repeat
 left center;
}

</code></pre>
You can use <a href="https://www.base64-image.de/" rel="nofollow noreferrer">https://www.base64-image.de/</a> for convert

blocks|key|4399023|text|您可以通过在整个url上添加反标记来尝试这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4399024|style={{backgroundImage:url(${val.image+%7C%7C+'http://max-themes.net/demos/grandtour/upload/Tokyo_Dollarphotoclub_72848283-copy-700x466.jpg'}+)+}}|offset|length|style|CODE|4399025|entityMap^0|0|0|3Z|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

You can try this with by adding backticks on whole url
<code>style={{backgroundImage:url(${val.image || 'http://max-themes.net/demos/grandtour/upload/Tokyo_Dollarphotoclub_72848283-copy-700x466.jpg'} ) }}</code>

blocks|key|4399075|text|import+React,+{+PureComponent+}+from+'react'
import+logo+from+'./logo.png';

class+Home+extends+PureComponent+{
++++render()+{
++++++++return+(
++++++++++++<div>
+++++++++++++++++<div
++++++++++++++++++++style={{
++++++++++++++++++++++++backgroundImage:+`url("https://www.nicesnippets.com/image/imgpsh_fullsize.png")`,+backgroundRepeat:+'no-repeat',+width:+'800px',+height:+'250px',+color:+'blue'
++++++++++++++++++++}}>
++++++++++++++++++++++++Nice+Snippets
++++++++++++++++</div>
++++++++++++++++++++<hr+/>
++++++++++++++++++++<div
++++++++++++++++++++++++style={{
++++++++++++++++++++++++++++backgroundImage:+`url(${logo})`,+backgroundRepeat:+'no-repeat',+width:+'100%25',+height:+'250px',+color:+'blue'
++++++++++++++++++++++++}}>
++++++++++++++++++++++++Nice+Snippets
++++++++++++++++</div>
++++++++++++</div>
++++++++)
++++}
}

export+default+Home|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4399076|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import React, { PureComponent } from 'react'
import logo from './logo.png';

class Home extends PureComponent {
 render() {
 return (
 &lt;div&gt;
 &lt;div
 style={{
 backgroundImage: `url(&quot;https://www.nicesnippets.com/image/imgpsh_fullsize.png&quot;)`, backgroundRepeat: 'no-repeat', width: '800px', height: '250px', color: 'blue'
 }}&gt;
 Nice Snippets
 &lt;/div&gt;
 &lt;hr /&gt;
 &lt;div
 style={{
 backgroundImage: `url(${logo})`, backgroundRepeat: 'no-repeat', width: '100%', height: '250px', color: 'blue'
 }}&gt;
 Nice Snippets
 &lt;/div&gt;
 &lt;/div&gt;
 )
 }
}

export default Home
</code></pre>

blocks|key|4398870|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398871|style={{+backgroundImage：url(${require("../assets/pet4.jpeg").default})+}}|offset|length|style|CODE|4398872|entityMap^0|0|P|1A|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

This worked for me
style={{ backgroundImage: <code>url(${require(&quot;../assets/pet4.jpeg&quot;).default})</code> }}

blocks|key|4398810|text|您可以尝试usimg|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398811|backgroundImage:+url(process.env.PUBLIC_URL+%2B+"/++++++assets/image_location")|code-block|syntax|javascript|4398812|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You Can try usimg

<pre><code>backgroundImage: url(process.env.PUBLIC_URL + "/ assets/image_location")
</code></pre>

I'm trying to access a static image to use within an inline <code>backgroundImage</code> property within React. Unfortunately, I've run up dry on how to do this.
Generally, I thought you just did as follows:
<pre><code>import Background from '../images/background_image.png';

var sectionStyle = {
 width: &quot;100%&quot;,
 height: &quot;400px&quot;,
 backgroundImage: &quot;url(&quot; + { Background } + &quot;)&quot;
};

class Section extends Component {
 render() {
 return (
 &lt;section style={ sectionStyle }&gt;
 &lt;/section&gt;
 );
 }
}
</code></pre>
This works for <code>&lt;img&gt;</code> tags. Can someone explain the difference between the two?
Example:
<code>&lt;img src={ Background } /&gt;</code> works just fine.
Thank you!

Setting a backgroundImage With React Inline Styles

我正在尝试访问一个静态图像，以便在React中的内联backgroundImage属性中使用。不幸的是，我在如何做到这一点上已经用完了。一般来说，我认为你只是做了以下几点：import Background from '../images/background_image.png';var sectionStyle = {  width: "100%",  height: "400px",  ba

问使用React内联样式设置backgroundImage
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React内联样式设置backgroundImageEN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React内联样式设置backgroundImage
EN