project:

├── 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"/>
        );
    }
});

When i deploy static files(js,css,image) to CDN host,the header.png full path will be http:// cdn/img/header.jpg;

But my project host is http:// example, the header.jpg can't be load, so i want to find a way to replace the src value(example:./img/header.jpg -->http:// cdn/img/header.jpg )

-----By the way------

Hope using gulp to solve this problem; I fond gulp-assetpaths is good way to replace in HTML, but not work in jsx

project:

├── 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"/>
        );
    }
});

When i deploy static files(js,css,image) to CDN host,the header.png full path will be http:// cdn./img/header.jpg;

But my project host is http:// example., the header.jpg can't be load, so i want to find a way to replace the src value(example:./img/header.jpg -->http:// cdn./img/header.jpg )

-----By the way------

Hope using gulp to solve this problem; I fond gulp-assetpaths is good way to replace in HTML, but not work in jsx

• javascript
• reactjs
• gulp

1 Answer 1

I would remend you to look at Webpack which handles this really well. What you do is something like this:

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

When you require the image, you get back the url to wherever that image is placed after the build has pleted. There are Webpack loaders that already handles this (like file-loader), but you can always create your own loader which rewrites the path to your CDN. Note that Webpack treats a require in Javascript the same was as it treats url in CSS, so it doesn't matter where you reference the image, it'll still be passed through your loader.

You can of course use different strategies for production and development, so you'd only return the CDN url for a production build.