Приложение ReactJS не может загрузить фоновое изображение

Question

Я редко нахожу проблему, на которую я еще не могу найти ответ, но на этот раз я действительно в тупик - и я сожалею заранее, если мой вопрос окажется глупым или тривиальный.

Я создаю простое приложение React, и я должен предоставить компоненту Home фоновое изображение, которое является файлом .svg. Однако изображение не загружается - dev tools В разделе Network говорится, что он не может загрузить изображение, но он появляется там с хэшированным именем файла, поэтому я предполагаю, что файловый загрузчик работает. Я также использую реакционные css-модули. Я пробовал пару подходов:

Реагировать Компонент v.1

import React from 'react' 
import CSSModules from 'react-css-modules' 
import styles from '../styles/home.css' 

class Home extends React.Component { 
render() { 
return (
    <div className='homeContainer' styleName='homeBg'> 
    <div className='col-sm-12 text-center'> 
     <div className="jumbotron col-sm-6 col-sm-offset-3" styleName='transparentBg'> 
     <h1>Enter Your Location</h1> 
     <form> 
      <div className="form-group"> 
      <input type="text" className="form-control" placeholder='Location...' /> 
      </div> 
      <div className="form-group"> 
      <button className='btn btn-lg btn-submit btn-success' type="submit">Continue</button> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
); 
} 
} 
export default CSSModules(Home, styles) 

Вот CSS модуль:

.homeBg { 
    background-image: url(../images/pattern.svg) 
} 
... 

И мой Webpack конфигурации:

loaders: [ 
    {test: /\.js$/, exclude: '/node_modules/', loader: 'babel-loader'}, 
    {test: /\.css$/, 
    loaders: [ 
     'style?sourceMap', 
     'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
    ] 
    }, 
    {test: /\.svg$/, loader: 'file-loader'} 
] 

Вот второй подход, который я пробовал в компоненте:

render() { 
const bgImg = require('../images/pattern.svg') 

const background = { 
    backgroundImage: 'url(' + bgImg + ')' 
} 

return (
    <div className='homeContainer' style={background}> 
... 

Но у меня есть - изображение не загружается. Он загружается обычным тегом <img>, но не как фон. Что еще я мог попробовать? Спасибо заранее за любые предложения!

Answer 1

Вы можете попробовать, во втором примере

render() { 
    const bgImgUrl = // Insert the url for your image here 

    const background = { 
    backgroundImage: 'url(' + bgImgUrl + ')'; 
    } 

    ... 
} 

вместо использования требуется? Per https://facebook.github.io/react/tips/inline-styles.html кажется, что для этого нужен настоящий url.

Answer 2

Может быть, вы должны знать, что file-loader сделал с svg.In вашего второго подхода file-loader сделать thire вещи:

1. изменение ../images/pattern хэш и сделать его быть модуль возвращает только путь .SVG, как это:

   функции (модуль, экспорт, webpack_require) {

   module.exports = __webpack_require__.p + "32aa2ecb4810e9d55a3b870c0eab59eb.svg"; 
   

   }

2. скопировать файл SVG в папку вывода

Чтобы решить проблему, я думаю, вы можете посмотреть на выходе мысль файл, чтобы узнать, что произойдет с вашей SVG.

вы можете найти это в документе file-loade

Answer 3

Спасибо за все предложения, но, как я и ожидал, оказалось, что это глупая вещь в отношении Bootstrap и некорректной структуризации разметки ...

Answer 4

Я хотел бы сделать это, делая

import img from 'imageURL' 

немного, как если бы это был модуль НПМ

затем делать

state = { 
     img1: img 
} 

render(){ 

    const imgSize = { width: 100vw, height: 100vh } 

    return(

     <div><img src={this.state.img1} style={imgSize}/></div> 

    ) 
}