如何将 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。[=31= .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 相同，因此无论您在哪里引用图像都没有关系，它仍然会通过你的装载机。

您当然可以使用不同的生产和开发策略，因此您只需 return CDN url 用于生产构建。

如何将 JSX 中的 href/src 值从相对路径替换为完整路径？

How to replace href/src value in JSX from relative path to full path?

javascript

reactjs

gulp