如何将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 require在Javascript中处理的内容与url在CSS中处理的内容相同,因此在引用图像的位置无关紧要,它仍将通过您的加载程序传递.

您当然可以使用不同的策略进行生产和开发,因此您只需返回生产版本的CDN URL.