如果使用create-react-app和require导入图像,require返回一个ES模块而不是字符串。这是因为在file-loader中,esModule选项是默认启用的。

用以下方式之一导入图像:

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

在react项目中使用require引入图片不生效的更多相关文章

  1. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  2. vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~ ...

  3. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  4. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  5. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  6. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  7. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  8. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  9. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

随机推荐

  1. 详解Threejs中的光源对象

    光源的分类 AmbientLight(环境光),PointLight(点光源),SpotLight(聚光源) 和 DirectionalLight(平行光)是基础光源 HemisphereLight( ...

  2. VS调用别人的COM组件的问题

    调用第三方的COM组件,记得要先在管理员cmd执行:regsvr32 xxxx.dll 没执行之前运行 HRESULT hr = pComm.CreateInstance("xxxx.Com ...

  3. vector.erase();vector.clear();map.erase();

    vector::erase()返回下一个iter: STL中的源码: //清除[first, last)中的所有元素 iterator erase(iterator first, iterator l ...

  4. REPuter注释叶绿体重复序列

    REPuter可注释叶绿体重复序列,包括4种类型,Forward(F), Reverse (R), Complement (C), Palindromic (P). REPuter 是可在线注释, 详 ...

  5. rabbit mq的一个实例,异步功能

    简单的使用场景:消息队列的场景有:解耦,异步,削峰. 此例用的场景,异步 有时候会有请求消耗时间过长,不能老让用户等待返回结果,可以用消息队列来做异步实现,之前用过workmain等类似的异步,但不如 ...

  6. 日常Java 2021/11/15

    Applet类 每一个Applet都是java.applet Applet类的子类,基础的Applet类提供了供衍生类调用的方法,以此来得到浏览器上下文的信息和服务.这些方法做了如下事情: 得到App ...

  7. Django url中可以使用类视图.as_view()进行映射的原因

    说明:在练习天天生鲜项目时,对利用类视图去与正则匹配到的url做映射有点疑惑,经过查看他人博客以及自我分析算是整明白了,所以记录一下 参考:https://www.zmrenwu.com/post/5 ...

  8. Kotlin 学习(2)

    属性和字段 1.声明属性 Kotlin中可以使用var关键字声明可变属性,或者用val关键字声明只读属性,属性的类型在后面,变量名在前面,中间加冒号和空格. public class Address ...

  9. 08-认证(Authorization)

    这又是一个非常实用的功能,对我们做接口测试来说,经常要处理登录认证的情况 .如果不用这个Authorization其实也能解决认证的问题,无非就是把要认证的数据按照要求在指定位置传入参数即可.比如我们 ...

  10. 【Go】【Basic】MacOS上搭建GO开发环境

    1. GO下载 1.1. 下载地址:https://www.golangtc.com/download (需要科学上网) 1.1.1. PKG安装: 下载这个包:go1.9.2.darwin-amd6 ...