在React中require图片不显示

最新推荐文章于 2023-07-26 11:06:22 发布
最新推荐文章于 2023-07-26 11:06:22 发布
阅读量2.1k 收藏 5
点赞数 4
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ting_hao/article/details/109661227
版权

不知道其他学习React的小伙伴有没有遇到和我相同的问题，在React项目中使用require引入使用图片不显示：
在这里插入图片描述
如图上图所示，不能展示图片路径。
解决方案：
在这里插入图片描述
在引入的图片加.default就可以了。

不过这样的写法有点奇葩，那为什么会出现这样的情况呢？
因为require是动态加载，import是静态编译。
这里我推荐大家使用import来引入图片：
在这里插入图片描述
在这里插入图片描述

Ting_hao
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
React 引入img 图片不显示
臧小川的博客
09-23 2899
通过img标签的src属性引入图片时，相对路径经过页面渲染后变成了相对于项目的根目录路径。 import React from 'react' export default function App () { return ( <div> <img src="./1632363376(1).png" alt="" /> </div> ) } 两种解决方案 1：import 引入 import React from 'react' i
react引入图片不显示
weixin_49662044的博客
11-18 1970
2.通过import或者require方式引入,通过赋值的方式显示。1.检查地址是否正确，如果不正确，换成正确的地址。使用react开发时，引入的图片在浏览器不显示。2.在react中，不支持直接引入。
vue | require动态加载图片及遇到的报错
weixin_44864257的博客
04-26 1695
2. require不能用纯动态地址，必须要有图片的 路径+名称+后缀。2. 视图加载的时候未拿到数据，可以用v-if判断一下。（require是node用来加载并执行其它文件导出的模块的方法。结果图片无法显示，遇到了以下提示，而且获取图片名字还需要截取。使用require将url转为base64。1. 查看图片路径是否写错。在弹窗用以上操作的时候出现以下报错。1. 把图片数组改为图片名字。
React使用require时引入图片不显示
weixin_44136421的博客
07-01 1166
1.需求：React面临动态引入图片时，会使用到require，直接使用require时，图片不会显示 <img src={require("地址")} alt="" /} 2.解决方法 后面添加.default <img src={require("地址").default} alt="" /} 如果图片是动态引入的，按照下面这种方式 let imgAddress="././assets/img"; <img src={require(imgAddress).default} alt
react项目使用require方法引入图片做背景图片不生效
xJ_fang的博客
12-02 911
问题： 使用require引入图片后未生效 代码如下 原因：require返回一个ES模块而不是字符串。这是因为在file-loader中，esModule选项是默认启用的。 解决方法：在require（）方法后面加 .default const image = require("../../public/login/" + dateDate + ".jpg").default; ...
关于React项目中，require无法动态加载本地图片
05-19 3899
目录1. React加载本地图片的方法1.1 方法一1.2 方法二2. 关于使用require无法加载图片的解决方案2.1 案例一2.2 案例二3.参考文献 1. React加载本地图片的方法 1.1 方法一 第一种方法相信大多数人用的比较多，而且出现无法加载图片的错误比较少。 import user from '../img/user.png' <img src={user} alt="" /> 1.2 方法二 第二种方法也是比较常用，当时使用require这个方法读取本地图片出现错误的概率
reactnative显示本地图片
08-10
在React Native中显示本地图片是移动应用开发中的常见任务，特别是在使用JavaScript进行混合移动开发时。React Native允许开发者使用JavaScript来构建原生的iOS和Android应用程序，提供了丰富的组件库，其中包括用于...
react开发中如何使用require.ensure加载es6风格的组件
01-19
其实用的babel，在浏览器端就应该可以加载，之前少了个default： require.ensure([],(require) => { let A = require('./a.js')....遗憾的是：一般语言编译工具（如babel)，不支持直接require一个es6风格的React组件
React中上传图片到七牛的示例代码
08-29
在React应用中，将图片上传至七牛云存储是一个常见的需求。七牛云提供了一套完整的文件上传解决方案，包括JavaScript SDK，使得在前端实现图片上传变得简单。在本示例中，我们将探讨如何在React组件中利用七牛云的...
解决react,＜img＞src使用require方法引入图片不显示问题
最新发布
weixin_45481456的博客
07-26 876
再导入的图片后加.default即可。
Vue或React项目配置@路径别名及智能提示方案
Coding and studying
08-09 1730
如果想一次配置且不在乎占用内存情况，建议直接使用path-alias插件如果本机内存不够或觉得这个插件使用体验不佳, 建议使用。
解决vue项目运行后使用require()图片也不显示方法
z2428478096的博客
11-17 7397
最近在写vue项目时发现一个问题，在项目运行打包后却没有显示图片，明明路径也是正确的。在网上查询大部分文档都是说使用require(‘图片路径’)可以进行解决，运用到项目中发现还是没有用，到后面我对require方法进行查询后，得到了解决办法。 比如：我在assets下的images存放了图片，运行后 这样不显示 解决办法： <img class="headimg" :src="require(imgurl2)">使用require('图片存放目录' + 图片地址...
vue 加载图片使用@路径加载不出来
坐等夕阳落time的博客
10-14 3095
vue 加载图片使用@路径加载不出来
vue中动态绑定图片，无法显示问题。 require，以及使用require的原因.vue引用磁盘(本机，桌面图片)，绝对路径
F_fengzilin的博客
05-02 3394
文章目录#1.在使用vue加载普通静态图片时，可以直接使用相对路径#2.在使用vue动态加载图片时，必须使用require，#3..vue引用磁盘(本机，桌面图片)，绝对路径解决办法：将你需要的图片，添加到项目文件夹的static文件下，使用局部引入的方式进行引用。即可 #1.在使用vue加载普通静态图片时，可以直接使用相对路径 例如：<img src="../../static/logo.png" alt="" style="width:200px; height:100px"> 显示效果如下
vue：使用require动态加载本地图片报错找不到模块
m0_49623851的博客
10-11 3116
使用require动态加载本地图片报错找不到模块
VueCli动态加载图片踩坑，如何使用require(变量)动态获取图片
weixin_43732080的博客
04-17 8170
VueCli动态加载图片踩坑，如何使用require(变量)动态获取图片 使用字符串拼接，实现动态加载图片：require("@/" + src) 看个简单例子就懂了 在template里引用方法getImgUrl()： <div v-for="(item, index) in dataImg" :key="index"> <img :src="getImgUrl(item...
react项目使用require(“fs“)报错：找不到fs文件
qq_41653487的博客
03-30 7160
react项目使用require(“fs”)报错：找不到fs文件 原因：fs是node提供的模块，只能在node环境中才能执行相关方法，如果你的react是要运行在浏览器的，则不能直接调用fs模块，因为浏览器并没有提供fs相关api 两种解决方法： 1、将以下配置添加到webpack.config.js node: { fs: "empty" } 2、将以下配置添加到package.json "browser": { "fs": false } ...
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3097
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
vue的图片资源引入不显示问题
Hello World
07-16 2656
解决vue中单页应用无法引入图片等常用静态资源的问题
在react 中 img标签无法显示图片 并且上面的那个答案也无法显示
07-13
3. 使用`require`语法引入图片：在React中，可以使用`require`语法将图片引入。 ```jsx import React from 'react'; import myImage from './path/to/image.jpg'; const MyComponent = () => { return ; }; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值