javascript - 如何将 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、图片)部署到 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。