react 动态渲染img 的src

已于 2023-12-08 14:55:00 修改
阅读量301 收藏
点赞数
文章标签： react.js 前端 typescript
于 2023-12-08 14:50:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40581358/article/details/134878533
版权

 <img

        className="weather-icon"

        src={require(`../../assets/image/weather/${iconName ? iconName : 'cloudy'}.svg`)}

        alt="weather-icon"

      />

注意：src直接require(../../image/a.png)图片不会出来，用三元判断一下，加一个默认的图片就好了

BSCIO_599
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决react,＜img＞src使用require方法引入图片不显示问题
weixin_45481456的博客
07-26 875
再导入的图片后加.default即可。
解决react使用＜img＞时图像不显示问题，内附代码和解释
yilia学习小园
07-18 1973
在react项目开发时，遇到了使用标签时图像不显示的问题，具体表现如下图所示。为父元素div添加宽和高，或者为img元素添加宽和高都不能解决问题。最终发现问题源自项目结构。本项目是使用create-react-app创建的，其中存在public文件目录，index.html文件入口就在该目录中，因此当把图片等静态文件放到此目录中时，可以采用上面所写的代码直接读取到对应的文件。
react中img引入本地图片的方式
kjl536566的博客
12-11 1823
第二种引入方式，你在css文件里面可以引用，因为css-loader会把资源文件一起打包， 而在js中这样引入，webpack只会当前的src当做字符串，并不会当做资源文件去处理，这样当你的代码- -旦打包到线上就会出现图片文件路径找不到的问题。第一种引入方式，webpack把当前图片当做资源文件打包，你可以在配置文件里面设置图片加载器，小与多少kb已base64码的格式打包，当大于某个kb大小的时候，webpack会把当前图片 也变编译到你的你的打包目录下面。1.基于es6Module。
关于在react项目中img标签src的路径问题
sakura的博客
09-16 4351
关于在react项目中img标签src的路径问题 ​ 公司要求开发一个静态页面，那这当然需要用img标签放些图片作为背景。之前我的做法是把images这个文件夹放在站点的子目录里面，然后通过站点ip加上路径就可以直接访问到，类似这样： //10.0.249.15为该站点ip，斜杠“/”后面表示为路径。 http://10.0.249.15/secssc/images/background3.png ​ 然后这样就把路径写死了，换个环境显然是行不通的。 ​ 那就把img放在本地路径呗。类似这样 <i
解决React 的＜img ＞src使用require的方式图片显示不出来或者音频显示不出来，展示的是[object Module]的问题
m0_72958893的博客
10-09 1213
当我们用 单文件写组件时，在 script 标签内使用的是 ES6 的语法且使用 export default 进行默认导出。然而，require 是 CommonJS 的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件。相反，如果 文件中使用 CommonJS 或 AMD 模块化语法，使用 module.exports 对象进行导出，那么使用 require 导入时就不需要使用 .default 来获取。
react 引用本地js_手把手教你创建第一个React组件
weixin_39909366的博客
12-07 639
大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性 和 团队 成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。本篇文章主要介绍以下内容：如何创建我们的第一个 React 组件如何组...
2020-09-08
mywxtjj的博客
09-08 95
ionic创建angular项目 1.全局安装ionic和cordova cnpm i -g ionic cordova 2. 进入项目目录安装项目 ionic start mydemo 3.如果需要创建到tabs栏的项目,则在命令后面添加tabs ionic start mydemo tabs 4.进入项目运行项目 ionic serve ...
vue动态渲染svg、添加点击事件的实现
12-28
经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能（尤其是svg内部点击事件），最终采用Vue.extend()方法完整实现，代码也较为简洁，html结构如下： <div id=svgTemplate></div> ...
react-使用React构建的动态可搜索轻量级的项目组合
08-14
<img src={project.imageUrl} alt={project.title} /> ))} ); ``` 最后，为了使项目组合更轻量级，我们可以优化图片加载，使用懒加载技术。这可以减少初始页面加载时间，提高用户体验。我们可以引入一个...
React实现轮播效果
10-14
class Img extends React.Component { constructor(props) { super(props); this.state = { listImg: [ './img/banner1.jpg', './img/banner2.jpg', './img/banner3.jpg', './img/banner4.jpg', './img/...
react-docs:React Img Mapper的文档
03-29
React Img Mapper组件还可能支持其他特性，如自定义样式、自定义覆盖层（overlay）以及对映射数据的动态更新。这使得它在需要交互式图像的项目中非常有用，例如电子商务网站的产品展示、地图应用中的热点区域，或者...
React框架制作人物介绍切换特效
06-24
例如，可以在JSX中直接插入状态变量，如`<img src={this.state.currentImage} />`，根据状态显示不同的图片。 8. **优化性能**： 对于大型项目，为提高性能，可以使用`PureComponent`或`shouldComponentUpdate`...
【React】为img标签的src请求添加自定义头部，添加token，实现前端带身份向后端请求图片
29的博客
12-03 1万+
目录应用场景尝试解决一：尝试解决二：总结： 应用场景 问题：前端写入指定的img标签和src属性，请求不了后端图片。 原因：401，UnauthorizedError，因为前端中的src属于普通的get请求，不带自定义header，而后端有对每个请求都进行身份验证，最终返回 { status: 1, msg: "TOKEN ERROR" } 前端请求头中找不到 Authorization: Bearer token.... 那请求的接口都有对axios进行拦截，但是img标签的src不经
react 怎么获取img 的src_react源码个人笔记-版本17.0.0（笔记04）
weixin_42499530的博客
01-01 300
// ensureRootIsScheduled 函数定义（1）// src: src/react/packages/react-reconciler/src/ReactFiberWorkLoop.old.js // 逻辑： 修改调度开始，（1） 当update 为同步，非批量更新， 时间为非（render || commit） // 走performSyncWorkOnRoot ，（2...
react项目中关于img标签的src属性的使用
weixin_30486037的博客
05-27 3963
　　在一个html文件中，img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片。如下： <img src="../images/photo.png"/> 　　但在jsx文件中，不支持直接在标签内写图片的路径，可以使用如下两种方法引入图片： 1，import 方法 import imgURL from './../images/photo.png'; &...
react 怎么获取img 的src_React - 尝试更改<img> src属性
weixin_31889919的博客
12-23 1233
我试图在AJAX调用数据库后更改元素的src属性 . 我有一个在 getDefaultProps() 中定义的默认图像网址，但在AJAX调用之后图像不会改变 .PictureWidget 是控制状态的 Section 组件的子组件(它还将dataSource和dataSourceParams传递给 PictureWidget ) . 我不确定我是否可以使用本地状态 PictureWidget 所以...
react 中img标签src字符串的拼接问题
weixin_51761059的博客
12-24 2136
需要根据变量item.coverImg而变化的src的拼接实现如下 <img src= {‘http:example.com’+ item.coverImg } alt="" /> alt=""表示图片未加载成功时将不会有任何显示
react img的src属性设置相对路径的方式
热门推荐
得之我幸
06-19 1万+
react img中的src不支持直接赋值相对路径，即不支持<img src="./../src/favicon.ico"/> 可以使用以下两种方法可以引入图片 import方法 import imgurl from "./../src/favicon.ico"; ... <img src={imgurl}/> require方法 <img src={require...
前端效果ᅳ1、react实现时间上下轮播特效
最新发布
ChenJin_2的博客
07-16 69
前端效果ᅳ1、react实现时间上下轮播特效
react如何设置Img标签
06-13
在React中，可以使用`<img>`标签来渲染图片。要设置`<img>`标签的属性，可以使用JSX的方式来设置。例如，要设置图片的地址，可以这样写： ```jsx <img src="path/to/image.png" alt="description" /> ``` 其中，`src`属性指定图片的路径，`alt`属性指定图片的描述信息。如果要使用动态的图片路径，可以将路径存储在变量中，然后在JSX中使用变量。 ```jsx const imagePath = "path/to/image.png"; function MyComponent() { return ( <div> <img src={imagePath} alt="description" /> </div> ); } ``` 注意，`src`属性的值需要使用花括号`{}`包裹，表示这是一个JS表达式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值