Comments (4)
Hi Roy,
Definitely this is not a bug, the plugin only process img with literal sources, as the transformation occurs in compile time ( not in runtime ) it is impossible to evaluate an expression. In other hand, the plugin generate the needed imports and imports in ES6 are meant for static analysis. Anyways , I know that webpack use something called contexts for process dynamic requires ( not imports ) so we can tag this as a enhancement and make some further research about whether this technique is applicable here or not.
from babel-plugin-transform-react-jsx-img-import.
Sounds great. Thanks for the detailed response and background on what might be possible as an enhancement I'm the future.
from babel-plugin-transform-react-jsx-img-import.
I'd love to see this enhancement happen. Must admit that I don't know very much about how it might work in other packers - but webpack indeed supports dynamic requires. Consider the following dummy React component:
class MyComp extends React.PureComponent {
static propTypes = {
num: React.PropTypes.number.isRequired,
};
render() {
const { num } = this.props;
const img = require(`./image${num}.jpg`);
return (<div>
<h1>Simple src</h1>
<img src="./image2.jpg" />
<h1>With explicit require</h1>
<img src={img} />
<h1>With string src attribute value</h1>
<img src={`./image${num}.jpg`} />
</div>)
}
}
With your the jsx-img-import transform enabled, the first image works exactly as expected. The 2nd image works, regardless of the transfform, and the third image would work - if this enhancement goes through.
(ps & OT: I'm looking for a similar transform for jade/pug)
from babel-plugin-transform-react-jsx-img-import.
Hi, any news on this? This would indeed be a neat enhancement
from babel-plugin-transform-react-jsx-img-import.
Related Issues (9)
- Absolute url should not be processed
- Failed when turning off modules of ES2015 preset HOT 5
- Use with `srcSet` HOT 1
- allow to override default transform behaviour HOT 2
- Data URIs should not be processed.
- Dynamic names HOT 1
- Protocol relative urls are not handled correctly
- Does not work with 'babel-plugin-transform-react-inline-elements' HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-transform-react-jsx-img-import.