如果使用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. [CCC​2019] Tourism题解

    我们先考虑一下拿部分分: subtask1 考虑因为 \(n < 2k\) ,那么我们的划分一定是从中间某个地方裁开,且满足 \(k\) 的条件的,我们发现当划分点在 \([n\ mod\ k, ...

  2. 洛谷 P3343 - [ZJOI2015]地震后的幻想乡(朴素状压 DP/状压 DP+微积分)

    题面传送门 鸽子 tzc 竟然来补题解了,奇迹奇迹( 神仙题 %%%%%%%%%%%% 解法 1: 首先一件很明显的事情是这个最小值可以通过类似 Kruskal 求最小生成树的方法求得.我们将所有边按 ...

  3. MYSQL5.8----2

    一定要按照这个顺序,where group by having order by limit 可以进行一次排序之后再一次拍寻 #存储的时候,能存数字就村数字

  4. GORM基本使用

    GORM 目录 GORM 1. 安装 2. 数据库连接 3. 数据库迁移及表操作 1. 安装 go get -u github.com/jinzhu/gorm 要连接数据库首先要导入驱动程序 // G ...

  5. python爬虫之正则表达式(用在其他地方也可)

    1. 常用的匹配规则 ### 常用的匹配规则 # \w 匹配字母.数字及下划线 # \W 匹配不是字母.数字及下划线的字符 # \s 匹配任意空白字符,等价于[\t\n\t\f] # \S 匹配任意非 ...

  6. CentOS6配置邮件发送

    CentOS6配置邮件发送 注意:要启用邮箱的服务端授权代理功能,并从中获取授权码 \cp /etc/mail.rc{,.bak} # 备份配置文件 cat >>/etc/mail.rc& ...

  7. Centos7服务器上RabbitMQ单机安装

    一.背景 最近项目中用到了RabbitMQ,但是发现自己本地没有安装,此文记录一下本地RabbitMQ的安装过程.注意不同的系统安装方式略有不同,此处我们记录的是Centos7的安装方式. 二.安装方 ...

  8. Hadoop运行jar包报错java.lang.Exception: java.lang.ArrayIndexOutOfBoundsException: 1

    错误信息: java.lang.Exception: java.lang.ArrayIndexOutOfBoundsException: 1    at org.apache.hadoop.mapre ...

  9. 生产调优3 HDFS-多目录配置

    目录 HDFS-多目录配置 NameNode多目录配置 1.修改hdfs-site.xml 2.格式化NameNode DataNode多目录配置(重要) 1.修改hdfs-site.xml 2.测试 ...

  10. 分类模型性能的评判方法-ROC分析

    一.混淆矩阵 二.引入ROC曲线 如上第一幅图,蓝色高斯表示真实值为阴性,红色高斯表示真实值为阳性.A,B,C代表不同的阈值,阈值线左边表示预测值为阴性,阈值线右边表示预测值为阳性.阈值从A到C,由此 ...