Как заменить значение href/src в JSX от относительного пути к полному пути?

Question

проект:

├── img 
│   └── header.jpg 
├── index.html 
├── js 
│   └── react.js 
└── jsx 
    └── header.jsx 

header.jsx

var Header = React.createClass({ 
    render: function() { 
     return (
      <img className="header" src="./img/header.jpg" alt="header"/> 
     ); 
    } 
}); 

Когда я развернуть статические файлы (JS, CSS, изображение) на CDN хозяина, header.png полный путь будет HTTP: // cdn.com/img/header.jpg;

Но мой проект хозяин HTTP: // example.com, то header.jpg не может быть нагрузка, поэтому я хочу найти способ заменить значение Src (пример: ./ IMG/заголовок .jpg -> Http: // cdn.com/img/header.jpg)

----- Кстати ------

Надежда с помощью глотка, чтобы решить эту проблему; Я люблю gulp-assetspaths - хороший способ заменить в HTML, но не работает в jsx

Answer 1

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

var path = require('./img/header.jpg'); 
return <img className="header" src={path} alt="header" /> 

Когда требуется изображение, вы получите обратно URL туда, где этот образ помещается после завершения сборки. Есть загрузчики Webpack, которые уже обрабатывают это (например, файл-загрузчик), но вы всегда можете создать свой собственный загрузчик, который переписывает путь к вашему CDN. Обратите внимание, что Webpack обрабатывает require в Javascript так же, как и обрабатывает url в CSS, поэтому не имеет значения, где вы ссылаетесь на изображение, оно все равно будет передаваться через ваш загрузчик.

Вы можете, конечно, использовать различные стратегии для производства и разработки, поэтому вы должны вернуть только CDN-url для сборки продукции.