從私有服務器上的公共網站加載動態圖像

Question

我正在嘗試從具有訪問權限的專用服務器加載圖像。 從專用服務器加載時，它會引發錯誤，盡管當我嘗試使用本地文件夾時它可以正常工作。

我的代碼段如下：

import React, { Component } from 'react';

export default class DefaultImages extends Component {

 render(){ 
     return(<div className="row">
              <div > <h2>Car Gallery</h2></div>
                  <div  className="slide fdi-Carousel">
                    <div className="onebyone-carosel">
                     {this.list(this.props.ImagesDataJson)}
                   </div>
                      </div>                  
 </div>

);}

list(data) {
 return data.map((data, index) => {

     return ( <div className="item active">
   <div className="col-md-6">
   {data.photo_url.map(function(data, index){ 
         return <img key={index} src={require("http://abc1234566667777777.com/2001/51648/1/10/Thumbnails/339673.Jpeg")}
 className="img-responsive center-block"/>  } )}
      </div>
      </div>
      )
  }) } }

Answer 1

要加載圖像，您只需指定如下URL

<img key={index} src={"http://example.com/2001/51648/1/10/Thumbnails/339673.Jpeg"} className="img-responsive center-block"/>

這是一個工作示例https://codesandbox.io/s/8831xy600j