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. 使用python 写一个 股票涨跌提醒功能

    1: 安装python: https://www.cnblogs.com/liyafei/articles/11550979.html 将python.exe加入 全局path 2: 安装库:(不需要 ...

  2. 酷卓 一键ROOT教程

    待编辑,还没写完 哈哈 酷卓 一键ROOT教程 首先简单介绍下酷卓. 酷卓由我个人开发,主要为了用户获取ROOT简单化,傻瓜化.酷卓获取方式:加QQ群 766969447 群文件下载就行 1. 手动选 ...

  3. centos7在命令界面使用命令可以执行,但在jenkins中输入命令报Chrome has crashed.

    问题:selenium.common.exceptions.WebDriverException: Message: unknown error: Chrome failed to start: ex ...

  4. Wannafly Camp 2020 Day 2I 堡堡的宝藏 - 费用流

    感谢这道题告诉我KM求的是 完备 最大权匹配 :( #include <bits/stdc++.h> using namespace std; #define reset(x) memse ...

  5. PP: Neural ordinary differential equations

    Instead of specifying a discrete sequence of hidden layers, we parameterize the derivative of the hi ...

  6. 【vue】 vue跳转页面:router-link/this.$router.push()

    1.通过标签<router-link> <router-link to='A'>跳转到A页面</router-link> 2.通过方法 this.$router.p ...

  7. 《Head first设计模式》学习笔记 – 迭代器模式

    <Head first设计模式>学习笔记 – 迭代器模式 代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 爆炸性新闻:对象村餐厅和对象村煎饼屋合并了!真是个 ...

  8. python的selenium实现自动登陆

    知道思想,参考其他文档,python的request模块和selenium模块都可以实现get_cookie()和 add_cookie()的功能. 由于现在在学习selenium自动化测试,我选用s ...

  9. CQYZOJ P1392 拔河问题

    题目\(1\) Description 一个学校举行拔河比赛,所有的人被分成了两组,每个人必须(且只能够)在其中的一组,且两个组内的所有人体重加起来尽可能地接近. Input 第\(1\)行是一个\( ...

  10. 解决前端js、css缓存问题

    去js标签库查询jquery.i18n.properties.js这个js引用到页面上: 新建一个配置文件:用上面的那个js方法调取配置文件里的版本号给其他的js加上: 示例: <script ...