react项目中＜img /＞标签引入图片方式

最新推荐文章于 2024-03-20 22:45:42 发布
最新推荐文章于 2024-03-20 22:45:42 发布
阅读量4k 收藏 4
点赞数 4
分类专栏： react 前端问题 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36016136/article/details/113060542
版权
问题描述

在react 项目中，当我向通过img标签的src属性引入图片时，发现我写的相对路径经过页面渲染后变成了相对于项目的根目录路径。如下图：
项目中我引入图片的方式
引入图片方式
页面渲染出来后src里的路径
页面路径
从上面的两张图中我们可以看出，img的相对路径并不像我们想象中的那样，它相对的是项目的根目录，所以我的照片自然找不到路径而不能正常渲染出来。

解决方法

在这里插入图片描述

写在最后： 如有错误，欢迎指正

小白找兔子
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-native-popover, 用于响应本机的<Popover/> 组件.zip
09-18
react-native-popover, 用于响应本机的<Popover/> 组件 react-native-popover 用于响应本机的<Popover> 组件。 这仍然是一个正在进行中的工作，只处理最简单的情况，想法和贡献是非常受欢迎的。 安装npm i --save rea
react-native-screcorder, 用于响应本机的<Recorder/> 元素.zip
09-18
react-native-screcorder, 用于响应本机的<Recorder/> 元素 react-native-screcorder一种反应本机组件，用于捕获图片和记录与藤类似的图片。基于这个了不起的图书馆 SCRecorder 。正在启动npm install react-native-screcorder@l
功能问题：如何在Vue3中引用本地图片路径？
最新发布
m0_74802419的博客
03-20 622
在使用el-image组件加载本地图片时，总是提示Failed，图片显示不出来。使用require当然也无济于事，因为我的项目脚手架用的是Vite。
react项目中iframe中img标签的获取、赋值；使用iframe来渲染接口返回的base64格式的svg图片
zl的博客
07-22 750
iframe>srcDoc中放入解析好的html的内容，定义一个ref为communicatRef，方便获取该iframe中的内容onLoad方法中写具体的实现方法。
react 项目中引入图片的几种方式
jared.wang
07-06 9355
几种react中插入图片以及背景图片的方式 img标签引入图片 因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件，然后就可以直接写css语...
React 引入img 图片不显示
臧小川的博客
09-23 2802
通过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中img引入本地图片的2种方式
TwoBE9876的博客
11-23 4955
一、通过import引入（推荐） 以前我们用img引入图片只需要如下即可 但在react中不允许使用这种方式，会报错 import logo from '../assets/images/home/logo.png' <img className={"logoStyle"} src={logo} alt=""/> 二、require方法引入 <img className={"logoStyle"} src={require('../assets/imag..
解决react使用＜img＞时图像不显示问题，内附代码和解释
yilia学习小园
07-18 1717
在react项目开发时，遇到了使用标签时图像不显示的问题，具体表现如下图所示。为父元素div添加宽和高，或者为img元素添加宽和高都不能解决问题。最终发现问题源自项目结构。本项目是使用create-react-app创建的，其中存在public文件目录，index.html文件入口就在该目录中，因此当把图片等静态文件放到此目录中时，可以采用上面所写的代码直接读取到对应的文件。
react中img引入本地图片的方式
kjl536566的博客
12-11 1277
第二种引入方式，你在css文件里面可以引用，因为css-loader会把资源文件一起打包， 而在js中这样引入，webpack只会当前的src当做字符串，并不会当做资源文件去处理，这样当你的代码- -旦打包到线上就会出现图片文件路径找不到的问题。第一种引入方式，webpack把当前图片当做资源文件打包，你可以在配置文件里面设置图片加载器，小与多少kb已base64码的格式打包，当大于某个kb大小的时候，webpack会把当前图片 也变编译到你的你的打包目录下面。1.基于es6Module。
react如何引入图片（背景图或img标签）
weixin_57399180的博客
01-31 1901
react如何引入图片（背景图或img标签）
React中使用img
coderxsj
05-27 2238
方式1.先根据路径引入，然后当作变量使用 import logo from '../assets/logo.png' //... <img src={logo} alt='logo'/> 方式2.使用require <img src={require('../assets/logo.png')} alt='logo'/>
react-only-when:用于条件渲染的声明性组件
04-27
仅在React时 用于条件渲染的声明性组件 安装 npm install --save react-only-when 用法 import Only from 'react-only-when' < Only xss=removed> < h1> Here I Am < / h1 > < / Only > 完整的例子 import ...
react-tabs:极其简单灵活的标签页
05-19
React标签 极其简单灵活的标签页 正在安装 npm i @starnavi/react-tabs 或者 yarn add @starnavi/react-tabs 基本范例 import { Tab , Tabs , TabList , TabPanels , TabPanel } from '@starnavi/react-tabs' ; ...
【JavaScript源代码】react 项目中引入图片的几种方式.docx
12-29
react 项目中引入图片的几种方式 　因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片　我们可以像引入模块一样引入图片 　import img from './../../../../asset/img/user.png'...
Vue中在mounted中能获取this.$refs但是获取不到属性的一种情况(路由懒加载)
热门推荐
qq_36016136的博客
07-17 1万+
一、问题描述 在Vue中的组件钩子函数mounted中，通过this.$refs无法获取某个组件，且该组件没有用到v-for、v-if、v-show等vue指令 <!--组件标签--> <scroll class="content"ref="scroll"></scroll> <!--组件脚本--> export default { mounted() { console.log(this.$refs); } } 输出结果：可以看到t.
配置webpack的externals出现Vue is not defined的问题
qq_36016136的博客
12-23 5519
场景 当在优化项目的时候，因为打包出来的chunk-vendors体积太大，这是因为在项目中使用到的依赖和插件都默认打包到该文件当中，为缩小它的体积，优化页面加载速度，对插件和依赖采用外部CDN加载，这个时候就需要配置webpack的externals节点，并且在项目的index.html中有问题与解决 我所遇到的问题是，在配置完externals节点之后，项目无法启动，控制台打印出了Vue is not defined的错误，其中vue就是我配置的其中一个，经过检查，我才发现，我将externals节点进
vue中使用Echarts时初始化init方法找不到
qq_36016136的博客
12-22 4762
问题 今天在使用Echarts绘制图表时，发现在使用的过程中出现了下列的错误 解决 先确认是否正确安装和引入Echarts，具体可以看官网Echarts入门教程，如果安装和引入没有问题，尝试使用低版本的Echarts，我今天使用的最新版本就出现这种问题，换了低版本就可以了。 怎么查看Echarts版本，看这里 我的问题也是看了他的博客解决的 ...
mint-ui官网无法打开的解决方法
qq_36016136的博客
11-03 2299
看了网上的解决方案，大体有两种，一种是将http协议更改为https协议，即mint-ui官方地址，今天就说说第二种方式 step1：前往“站长工具”查询mint-ui.github.io的DNS 站长工具路径 step2:找到TTL值最小的那个的ip地址 和 unit-ui的网址对应关系，配置到hosts文件中 step3:修改hosts配置文件如下，该另外一种就是修改hosts文件，该文件本地上的地址一般为C:\Windows\System32\drivers\etc 但是在这个过程中，可能会出现hos
一个react项目中，在入口文件App.tsx里渲染了<One></One>组件和<Two></Two>组件,在页面中<One/>组件在<Two/>组件上方，<App/>宽400px,<One/>组件宽400px，高200px,<Two/>组件宽400px，高600px,，用swiper怎么让<One></One>组件变成轮播图，轮播两页
05-28
你可以使用Swiper的轮播功能来实现这个要求。首先，你需要将<One></One>组件和<Two></Two>组件包裹在一个div容器中，然后设置这个div容器的高度为600px，宽度为400px。 然后，在<One></One>组件的外层再包裹一个div容器，设置这个div容器的宽度为800px，然后在这个div容器中渲染两个<One></One>组件，分别为第一页和第二页。 最后，使用Swiper组件，将这个div容器作为Swiper的一个slide，设置Swiper的slidesPerView为1，spaceBetween为0，loop为true，这样就可以实现在一个400px宽度的容器中轮播两个400px宽度的<One></One>组件了。 以下是示例代码： ```javascript import React from 'react'; import Swiper from 'swiper'; import 'swiper/css/swiper.css'; const App = () => { return ( <div style={{ width: '400px' }}> <div style={{ height: '600px' }}> <div style={{ width: '800px' }}> <One /> <One /> </div> <Two /> </div> </div> ); }; const One = () => { return ( <div style={{ width: '400px', height: '200px' }}> One </div> ); }; const Two = () => { React.useEffect(() => { new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 0, loop: true, }); }, []); return ( <div className="swiper-container" style={{ width: '400px', height: '400px' }}> <div className="swiper-wrapper"> <div className="swiper-slide"> <One /> </div> <div className="swiper-slide"> <One /> </div> </div> </div> ); }; export default App; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值