javascript - importar - ¿Cómo usar url de imagen externa con react flux store?

insert image in react js

Question

Estoy accediendo a los datos del servidor con react flux utils y almacené los datos en flux store. Estos datos contienen el contenido del encabezado, el contenido de la descripción y la URL externa de la imagen (como, http://www.google.com/sample.jpg ). He almacenado localmente todos los datos con react flux store. Cuando vuelvo a visitar la página que ya fue visitada, las imágenes de la página se vuelven a cargar. No debería suceder. Porque esas imágenes ya están cargadas. ¿Cómo arreglar este problema?

Estructura de datos,

[
 {
   ''title'':''title 1'',
   ''content'':''Some copy'',
   ''image'':''http://www.google.com/sample.jpg''
 },
 {
   ''title'':''title 2'',
   ''content'':''Some copy'',
   ''image'':''http://www.google.com/sample2.jpg''
 }
]

Api

var Actions = require(''../actions/Actions'');
module.exports = {
 getProductData: function() {
  var data = JSON.parse(localStorage.getItem(''items''));
  Actions.receiveProduct(data);
 }
}

Transportista

var Dispatcher = require(''flux'').Dispatcher;

// Create dispatcher instance
var AppDispatcher = new Dispatcher();

// Convenience method to handle dispatch requests
AppDispatcher.handleAction = function(action) {
  this.dispatch({
    source: ''VIEW_ACTION'',
    action: action
  });
}

module.exports = AppDispatcher;

Constante

var keyMirror = require(''react/lib/keyMirror'');

// Define action constants
module.exports = keyMirror({
  RECEIVE_DATA: null    // Loads our mock data
});

Comportamiento

var AppDispatcher = require(''../dispatcher/AppDispatcher'');
var Constants = require(''../constants/Constants'');

// Define actions object
var MyActions = {

  // Receive inital product data
  receiveData: function(data) {
    AppDispatcher.handleAction({
      actionType: Constants.RECEIVE_DATA,
      data: data
    })
  }

};

module.exports = MyActions;

Almacenar

var AppDispatcher = require(''../dispatcher/AppDispatcher'');
var EventEmitter = require(''events'').EventEmitter;
var Constants = require(''../constants/Constants'');
var _ = require(''underscore'');

// Define initial data points
var _product = {};

// Method to load product data from mock API
function loadData(data) {
  _product = data;
}
// Extend ProductStore with EventEmitter to add eventing capabilities
var ProductStore = _.extend({}, EventEmitter.prototype, {
  // Return Product data
  getProduct: function() {
    return _product;
  },
  // Emit Change event
  emitChange: function() {
    this.emit(''change'');
  },
  // Add change listener
  addChangeListener: function(callback) {
    this.on(''change'', callback);
  },
  // Remove change listener
  removeChangeListener: function(callback) {
    this.removeListener(''change'', callback);
  }

});

// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;
  switch(action.actionType) {
    // Respond to RECEIVE_DATA action
    case Constants.RECEIVE_DATA:
      loadData(action.data);
      break;

    default:
      return true;
  }

  // If action was responded to, emit change event
  ProductStore.emitChange();

  return true;

});

module.exports = ProductStore;