創建反應的應用程序不加載css背景圖像在開發或構建

我有一些背景圖片不加載的困難。我做了初始一些顯著修改創建應用程序的反應，我的文件夾結構如下內容：創建反應的應用程序不加載css背景圖像在開發或構建

注：我省略了一些文件夾&，如果你需要更多信息，請讓我知道。

App/ 
node_modules/ 
src/ 
    client/ 
    build/ 
    node_modules/ 
    public/ 
    src/ 
    css/ 
    App.css 
    images/ 
    tree.png 
    yeti.png 
    App.jsx 
    server/ 
package.json 
Procfile

下面是步驟我才能創造這個問題：

$ cd src/server && npm run dev

這將啓動開發服務器，並打開瀏覽器，我的應用程序，一切工作正常，除了有些元素的精在不顯示圖像的頁面上。

注：我加載圖片yeti.png，這呈現良好。

App.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './css/App.css'; 
import yeti from './images/yeti.png'; 

const Footer = function(props) { 
    return (
    <div> 
     <Yeti /> 
     <Trees /> 
    </div> 
    ); 
}; 

const Yeti = function(props) { 
    return (  
     <img 
     src={yeti} 
     className="yeti yeti--xs" 
     alt="Yeti" 
     /> 
    ); 
}; 

const Trees = function(props) { 
    return (  
     <div className="trees"> 
     <div className="trees__tree trees__tree--1"></div> 
     <div className="trees__tree trees__tree--2"></div> 
     </div> 
    ); 
}; 

ReactDOM.render(
    <Footer />, 
    document.getElementById('root') 
);

App.css

.trees { 
    bottom: 0; 
    height: 110px; 
    left: 0; 
    position: fixed; 
    width: 100%; 
    z-index: 1; 
} 

.trees__tree { 
    background-size: 30px; 
    background: url('../images/tree.png') no-repeat; 
    float: left; 
    height: 50px; 
    width: 30px; 
} 

.trees__tree--1 { 
    margin: 0 0 0 6%; 
} 

.trees__tree--2 { 
    margin: 2% 0 0 4%; 
}

當我檢查在鉻的元素，該路徑將圖像似乎是正確的。當我將鼠標懸停在檢查器樣式選項卡中的圖像路徑上時，圖像出現。

注意，對於我導入圖像的路徑是相似的背景圖像的路徑：

如果我要導入tree.png爲import tree from './images/tree.png';，改變我的兩個<div>元素到<img src={tree} role="presentation" className="trees__tree trees__tree--1" />和<img src={tree} role="presentation" className="trees__tree trees__tree--2" />圖片當然會加載。

如何獲取背景圖像以顯示？我在應用程序中沒有加載其他背景圖片，因此前面提到的bandaid不會幫助我。我害怕彈出我的應用程序並且弄亂配置。

我在構建應用程序時也遇到同樣的問題。

如果您需要查看更多源代碼，您可以在https://github.com/studio174/ispellits上查看它，但請記住，我已簡化了此示例以隔離問題。我遇到的問題，實際上是在Footer.jsx和Footer.css

來源

2016-12-01 de__bug

您可以將鼠標懸停在類檢查器中的圖像src上並查看圖像預覽？ – 4m1r

@ 4m1r是的我可以，我無法捕捉到我的屏幕截圖，但是當我將鼠標懸停在導入圖像和背景圖像的路徑上時，chrome顯示圖像 –

您能否提出問題？我會盡量記得回覆這個問題，但如果您只需在Create React App repo中提出問題，那麼它會在那裏可見，我會在下次打開問題跟蹤器時看到它。 –

的問題是純粹與在App.css文件CSS問題：

App.css

.trees__tree {  
    background: url('../images/tree.png') no-repeat; 
    background-size: 30px; /** moved this property down */ 
    float: left; 
    height: 50px; 
    width: 30px; 
}

來源

2016-12-02 01:01:15

我的問題是明確的是我沒有定義background-size: 30px;。謝謝你。

來源

2017-06-20 14:42:43 IonicBurger

創建反應的應用程序不加載css背景圖像在開發或構建

回答

相關問題