Как загрузить внешнюю картинку в React?

Question

Как правильно загрузить внешнюю картинку (с unsplash.com) в React-компонент?

import React from 'react';

import slide1 from 'https://images.unsplash.com/photo-1593642532454-e138e28a63f4?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80';

class Slider extends React.Component {
  render() {
    return ( 
      <div id = 'slider' >
       <div className = 'slide bw'
        style = {
          {
            backgroundImage: `url(${slide1})`,
          }
        } >
       </div> 
     </div>
    );
  }
}

export default Slider;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

Выдает ошибку: ./src/App/components/Slider/Slider.js Module not found: Can't resolve 'https://images.unsplash.com/photo-1593642532454-e138e28a63f4?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80' in '/.../src/App/components/Slider'

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Load our React component. -->
    <style>
      .slide {
        width: 300px;
        height: 200px;
      }
    </style>

    <script type="text/babel">
      class Slider extends React.Component {
        render() {
          return ( 
            <div id = 'slider' >
             <div className = 'slide bw'
              style = {
                {
                  backgroundImage: `url(${this.props.url})`,
                }
              } >
             </div> 
           </div>
          );
        }
      }

      const App = () => {
        return (
            <Slider url="https://images.unsplash.com/photo-1593642532454-e138e28a63f4?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

БЛОГ НА HUSL

Как загрузить внешнюю картинку в React?

Ответы (1 шт):