Reactjs 使用 webpack 从目录中动态导入图片

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

import * from './images'

<img src={doggy} />
<img src={turtle} />

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

Reactjs相关问答推荐

如何等待我的插入内容提交后再继续执行指令？

有正确的方法来设置我的金牛座应用程序的图标吗？

Firebase删除UserWithEmail AndPassword仅创建匿名用户

FireBase未与Reaction应用程序连接

对搜索引擎优化来说，react 头盔的异步足够了吗？

useCallback()是否应该用于作为prop传递给子组件的函数，即使该组件包装在memo()中？

PWA：注册事件侦听器不会被触发

如何在 React Native 中渲染下面的对象数组？

预期无限重新渲染但没有发生

React - 函数组件 - 点击两次问题处理

如何渲染子路径并触发react 路由父加载器？

onChange in useEffect 的最佳实践

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别？我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗？

基于标记名的博客详细信息分组没有发生

未捕获的类型错误：useSelector 不是函数

Select 建议后如何关闭 vscode 添加自动完成={}

Cypress ，重试不再附加到 DOM 的元素

React如何在用户登录后等待当前用户数据被获取

如何在组件文件夹内的react 组件文件中导入外部css文件？