javascript - Dynamically importing an image source that has been passed as a prop in React
问题描述
I'm trying to dynamically import some images in one of my react components. The names of the images are stored in a JSON file which are then being passed to the component as a prop.
This is the parent component where the data is being passed in:
const GridBlocks = gridItems.map(({ imageSrc, alt, ...textProps }, index) => (
<div key={`grid-section-${index}`} styleName="grid-section">
<ImageBlock imageSrc={imageSrc} alt={alt} />
<TextBlock {...textProps} />
</div>
));
Now the problem I'm facing is that obviously I cant just
import prop from 'bar'
as usual since the child component won't have a clue what 'prop' is.
I've had a look around and I think the solution should look something like this? (except y'know....working). Particularly around 'require.context' but I just can't figure out the implementation.
import React from 'react';
import PropTypes from 'prop-types';
import './ImageBlock.css';
const assetRequire = require.context('Images/howItWorks/', true, /\.(png|jpg|svg)$/);
const ImageBlock = async ({ imageSrc, alt }) => {
const imageSrc1x = assetRequire(`${imageSrc}.png`);
const imageSrc2x = assetRequire(`${imageSrc}@2x.png`);
return (
<img
src={imageSrc1x}
srcSet={`${imageSrc1x} 1x, ${imageSrc2x} 2x`}
alt={alt}
styleName="image-block"
/>
);
};
ImageBlock.propTypes = {
imageSrc: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired,
};
export default ImageBlock;
Any help would be greatly appreciated.
解决方案
所以经过更多搜索后,我在这里找到了一个可行的解决方案
我稍微重构的版本如下
import React from 'react';
import PropTypes from 'prop-types';
import './ImageBlock.css';
function importAll(r) {
const images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); }); //eslint-disable-line
return images;
}
const images = importAll(require.context('Images/howItWorks/', false, /\.(png|jpe?g|svg)$/));
const ImageBlock = ({ imageSrc, alt }) => {
const imageSrc1x = images[`${imageSrc}.png`];
const imageSrc2x = images[`${imageSrc}@2x.png`];
return (
<img
src={imageSrc1x}
srcSet={`${imageSrc1x} 1x, ${imageSrc2x} 2x`}
alt={alt}
styleName="image-block"
/>
);
};
ImageBlock.propTypes = {
imageSrc: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired,
};
export default ImageBlock;
推荐阅读
- python - 如何将自定义数据集拆分为训练和测试数据集?
- php - PHP 中的“注意:未定义的变量”。我该如何解决?
- erlang - 在生产中编译 Phoenix 时出错
- ipv6 - 获取 MTD IPv6 地址
- javascript - 对具有相同键的对象值求和
- sql - SQL 如何使用已创建表中的信息
- codeigniter - Plesk 禁止 403 获取引导样式(nginx)
- python - Flask-admin:ImportError:没有名为 ext.sqlalchemy 的模块
- python - Django的新手。尝试查看有关如何加载 css 文件但不工作的教程
- reactjs - 无法使用 React.js 获取方法连接到 API