如何將JSX中的href / src值從相對路徑替換為完整路徑？

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，image）部署到CDN主機時，header.png完整路徑將為http：// cdn.com/img/header.jpg ;

但我的項目主機是http：// example.com ，header.jpg無法加載，所以我想找到一種方法來替換src值（例如：./ img / header.jpg - > http： // cdn.com/img/header.jpg）

- - -順便說說 - - -

希望用gulp來解決這個問題; 我喜歡gulp-assetpaths是在HTML中替換的好方法，但在jsx中不起作用

Answer 1

我建議你看一下處理這個問題的Webpack。 你做的是這樣的：

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

當您需要圖像時，您會在構建完成后將URL返回到放置圖像的位置。 Webpack加載器已經處理過這個問題（比如文件加載器），但是你總是可以創建自己的加載器來重寫CDN的路徑。 請注意，Webpack在Javascript中處理require與在CSS中處理url ，因此在引用圖像的位置無關緊要，它仍將通過您的加載器傳遞。

您當然可以使用不同的策略進行生產和開發，因此您只需返回生產版本的CDN URL。