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 - ＆gt; 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" />

当您需要图像时，您会在构建完成后将网址返回到放置图像的位置。 Webpack加载器已经处理过这个问题（比如文件加载器），但是你总是可以创建自己的加载器来重写CDN的路径。请注意，Webpack在Javascript中处理require与在CSS中处理url的情况相同，因此在引用图像的位置无关紧要，它仍将通过您的加载程序传递。

您当然可以使用不同的策略进行制作和开发，因此您只需返回生产版本的CDN网址。

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

1 个答案: