-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
can't dynamic require images #1668
Comments
Probably better to use something like this:
|
@DeMoorJasper import React, { Component } from 'react'
export default class App extends Component {
render () {
return (
<div>
{[1, 2, 3].map(
item => {
const images = require(`./${item}.png`)
return <img key={item} src={images}
alt=""/>
})}
</div>
)
}
} |
Well you didn't apply my code snippet at all? I'll write an example :) import React, { Component } from 'react';
/*
Images should resolve to the following:
{
'1': '/1-hash.png',
'2': '/2-hash.png',
'3': '/3-hash.png'
}
*/
import images from './*.png';
export default class App extends Component {
render () {
return (
<div>
{Object.keys(images).map(
key => {
return <img key={key} src={images[key]}
alt=""/>
})}
</div>
)
}
} |
@DeMoorJasper Hello, excuse me, if there is a Vue file, is there a way to achieve this? Introduce static resources in the data. |
@QAQLiuCong parcel works the same in any asset type, so as long as you can pass a link to the vue component it should work Sent with GitHawk |
@DeMoorJasper OK,Thank you for your reply |
Closing this, as I'm pretty sure it's resolved by my response |
How can I force application to refresh folder to look images like in your example |
@DeMoorJasper but this solution is very limited, as you are not having the hash. Is it somehow possible to get the full name of the file? |
Thanks you @DeMoorJasper. Goddamn I spent like an hour trying to figure this out, and @bologer if you know the file name you can just call images[FILENAME] |
Import paths matching a glob via a hint in a Parcel issue, parcel-bundler/parcel#1668
Is there any way to make this work with Parcel 2 (currently trying with |
Also curious about what @simonwiles is asking about. It seems the only solution for now is to manually import every asset individually. |
#5933 should enable this |
Problem: The `addDocketCounts` function specifies the name 'payload.js' as the file that should be executed in the chrome tab when scraping the page. However, when parcel builds the source files, the dist/ files all have a unique hash added to them so the file becomes something like 'payload.89274893.js'. I haven't figured out how to tell parcel to update this filename though. Solution: No idea. The problem is simiar to this issue, and this might be an option, but it feels a little smelly to me: parcel-bundler/parcel#1668 For now: I'm copying the file over manually so that the file is available as expected. Seems hacky, but I think it's currently working.
🐛 bug report
I use parcel to package the react project,but can't dynamic require images
File Directory
🎛 Configuration (.babelrc, package.json, cli command)
.babelrc
package.json
🤔 Expected Behavior
Each picture should be properly introduced
😯 Current Behavior
💁 Possible Solution
🔦 Context
💻 Code Sample
app.js
index.js
🌍 Your Environment
The text was updated successfully, but these errors were encountered: