Отображение изображения с использованием React

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

* login.js: *

var ImageFrame = React.createClass({ 
    render: function() { 
     return (
      <div className="bg-pic"> 
      <img src={"assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg"} data-src="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" data-src-retina="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" alt="" className="lazy" /> 
      <div className="bg-caption pull-bottom sm-pull-bottom text-white p-l-20 m-b-20"> 
       <h2 className="semi-bold text-white"> 
         HelloWorld makes the world look easy. 
       </h2> 
       <p className="small"> 
       All work copyright of respective owner, HelloWorld Inc. 
       </p> 
      </div> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <ImageFrame />, 
    document.getElementById('image_container') 
);

* login.html *

<body class="fixed-header"> 
    <div id="image_container" class="login-wrapper"></div> 
    <script type="text/babel" src="assets/js/login.js"></script> 
</body>

отображается Пурпурный фон для изображения, но не само изображение ... когда я размещаю версию HTML, она отлично работает:

*** HTML ****

<div class="bg-pic"> 
    <!-- START Background Pic--> 
    <img src="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" data-src="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" data-src-retina="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" alt="" class="lazy"> 
    <!-- END Background Pic--> 
    <!-- START Background Caption--> 
    <div class="bg-caption pull-bottom sm-pull-bottom text-white p-l-20 m-b-20"> 
    <h2 class="semi-bold text-white"> 
     HelloWorld makes the world look easy.</h2> 
    <p class="small"> 
     All work copyright of respective owner, HelloWorld Inc. 
    </p> 
    </div> 
    <!-- END Background Caption--> 
</div>

Как я могу получить изображение, используя ReactJS?

источник

2016-09-09 cybertextron

Использовать для src src = {require ("assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg")} –

Возможно, отбрасывание фигурных скобок '{}' из ваш атрибут src, они используются для оценки выражения jsx. –

@RobbertvanElk ... как насчет тегов 'data-src'? – cybertextron

Я не думаю, что вы правильно закрываете теги в render; это выглядит как верхние <div> и img теги не имеют маркеров закрытия. Ваша консоль дает какие-либо ошибки?

редактировать: Это делает хорошо в загоне с образцом изображения: http://codepen.io/kiresuah/pen/JRYGJL?editors=1010, я подозреваю, что это что-то делать с вашей статической структуры файла или как вы импортируете изображение.

источник

2016-09-09 14:07:08

Нет ... это не ... Я обновлю вопрос ... – cybertextron

Erik , когда я дал полный путь изображения в src 'http: // localhost: 8080/html/assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg' it still didn ' t. – cybertextron

Странно, когда я применяю это к вашему коду ru, изображение отображается ... – cybertextron

Отображение изображения с использованием React

ответ

Смежные вопросы