react手动搭建的环境,require引进来图片不显示,网页src显示[object module]

解决方案

(1)import引进图片

import anli from './img/anli.png'
<img src={anli} alt=''/>

(2)require(图片路径).default

<img src={require("./img/bjrm.jpg").default}/>

引背景图片:

const img1={
backgroundImage:`url(${require("./img/bjrm-1.png")})`
}
<div style={img1}></div>

react手动搭建的环境,一部分图片能打包显示出来,一部分不能,我重新安装了file-loader,安装完图片全不能显示了,查看版本号是5.几,退回之前的4.3.0版本,又恢复页面最初状态了

手动搭建的react环境中,关于图片引入的问题的更多相关文章

  1. Kubernetes集群搭建之企业级环境中基于Harbor搭建自己的私有仓库

    搭建背景 企业环境中使用Docker环境,一般出于安全考虑,业务使用的镜像一般不会从第三方公共仓库下载.那么就要引出今天的主题 企业级环境中基于Harbor搭建自己的安全认证仓库 介绍 名称:Harb ...

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

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

  3. Windows手动搭建PHP运行环境

    首先~可以先在目录里面创建一个wamp目录,我的创建在 E: 盘 1.0 下载Apache2.4,x64位.VC11组件[电脑多少位装多少位] apache下载地址:https://www.apach ...

  4. abp框架angular 项目docker 手动部署到Linux环境中

    1.https://aspnetboilerplate.com/Templates 2.后端项目发布,在publish中abp默认已经存在DockerFile文件 3.修改后端文件中的DockerFi ...

  5. [php]手动搭建php开发环境(排错)

    前提:针对自己的系统下载相应的php.apache.mysql,安装完毕后按照以下去配置httpd.conf和php.ini 本人用的是php5.6.4和apache2.4.4 一.Apache : ...

  6. 在react项目中使用require引入图片不生效

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

  7. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  8. react-native中的图片

    静态图片资源 React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片.要往 App 中添加一个静态图片, 只需把图片文件放在代码文件夹中某处,然后像下面这样去引 ...

  9. 图文详解如何快捷搭建LNMP服务环境

    上一篇与大家一起学习了下如何搭建LAMP环境的知识,今天小编再和大家分享下如何快捷地搭建LNMP环境,并搭建起一个网站.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/S ...

随机推荐

  1. 第一个安卓app——计算器

    几天前,我花了一天时间,结合这段时间所学知识开发出了一个简单的计算器,它由两个TextView和23个Button组成,代码会放在文章结尾. TextView TextView:上面一个TextVie ...

  2. ALSA lib-ext plugin

    参考pcm_speex.c #include <stdio.h> #include <string.h> #include <unistd.h> #include ...

  3. [TJOI2015] 线性代数 - 最大权闭合子图

    展开 \(D=(AB-C)A^T\\ =\sum_{i=1}^n(\sum_{j=1}^na_jb_{j,i}-c_i)a_i\\ =\sum_{i=1}^n\sum_{j=1}^na_ia_jb_{ ...

  4. vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead.

    当我写了一个子组件,点击打开子组件那个方法时报了一个错 这句话说明意思呢?谷歌翻译一下↓ 数据属性“record”已声明为prop. 请改用prop默认值. 感觉翻译的有点怪,通过最后修改代码后大概意 ...

  5. gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn

    感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...

  6. SpringBoot 测试基类

    每次写单元测试都要重复写一些方法.注解等,这里我写了一下测试的基类 (1) 记录测试方法运行的时间 (2)两个父类方法 print,可打印list和object对象 (3)一个属性 logger 记录 ...

  7. 理解JWT(JSON Web Token)认证

    理解JWT(JSON Web Token)认证 最近想做个小程序,需要用到授权认证流程.以前项目都是用的 OAuth2 认证,但是Sanic 使用OAuth2 不太方便,就想试一下 JWT 的认证方式 ...

  8. 题解【洛谷P5958】[POI2017]Sabotaż

    题面 考虑树形 \(\text{DP}\). 设 \(dp_i\) 为使 \(i\) 变成叛徒的最大值,同时 \(dp_i\) 也是使 \(i\) 不变成叛徒的最小值. 然后考虑如何转移状态. 如果 ...

  9. 转载:TDM协议

    转自http://www.wangdali.net/i2s/ 1. PCM简介 PCM (Pulse Code Modulation) 是通过等时间隔(即采样率时钟周期)采样将模拟信号数字化的方法.图 ...

  10. 在 linux 中连接 mysql 数据库

    命令格式 mysql -h主机地址 -u用户名 -p用户密码 登录本机 mysql mysql -u用户名 -p用户密码 实例 TD - X1数据库:/opt/lampp/bin/mysql -u r ...