react require图片路径问题

最新推荐文章于 2024-05-06 08:58:21 发布
最新推荐文章于 2024-05-06 08:58:21 发布
阅读量8.4k 收藏 9
点赞数 5
分类专栏： 前端学习 文章标签： require
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruby_xc/article/details/87603777
版权

在require中引用本地图片时需要使用require(require里的值必须为字符串)

本地测试时, 如后端返回图片路径为'../static/img/img1.jpg',

使用props传入显示图片的组件

在子组件中引入该路径(引入失败):

此时看到控制台报错

觉得很奇怪, 我在前端写死图片路径, 如下(图片均能正常引入):

或者

 

把require放入表达式中引入失败: 

后来把路径拆分如下, 引入成功: 

修改服务器返回的路径为'static/img/img1.jpg', 在前端拼接后require(引入成功):

试了试, 如果不更改返回路径, 前端拼接空字符串如下也是引入失败的:

 

ruby_xc
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
reactnative显示本地图片
08-10
当使用本地图片时，我们需要使用`require`函数来加载图片资源，这样React Native编译器才能在打包时处理图片路径。 对于本地图片，路径通常以`require('./image_path')`的形式给出，这里的`image_path`是相对于当前...
react 图片绝对路径_React项目webpack打包时重新配置css中图片路径
weixin_35146639的博客
01-14 1769
最近做的一个移动端项目是使用CRA搭建的，由于CRA脚手架是将webpack的配置封装了起来，为了便于自己修改webpack配置，在项目中引入了react-app-rewired包，这时项目的根目录下生成了一个config-overrides.js文件，在这个文件里修改webpack默认配置即可。项目使用了antd-mobile组件，所以在webpack配置中写入了babel-plugin-imp...
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3074
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
Vue3 动态引入图片: require is not defined报错
最新发布
May21☀️
05-06 613
问题：在 Vue3 项目中，使用 require 引入图片，报错 require is not defined。原因： Vue3 使用的是 vite，而 require 是 Webpack 的方法。
vue项目中通过require引入静态图片路径
weixin_46125684的博客
12-01 1897
vue项目中通过require引入静态图片路径
React Native加载图片详解
flyingpig2016的博客
07-25 1万+
一：Image组件的基本用法1.1从当前项目(即本地)中加载图片 <View style={styles3.container}> <Text>加载本地图片</Text> <Image source={require('./img/1.jpg')} style={styles3.img1} /> </View>这时候的图片可以放在根目录，也就是和inde
vue中引入图片为什么使用require
qq_42931285的博客
07-12 6355
require、vue中引入图片
vue-cli项目中通过require引入静态图片路径的解释
树上骑个猴的博客
01-26 2421
需求： index.vue 怎样能把 assets 里面的图片拿出来加载使用。 在 img 标签中直接写上路径 <img src="../assets/logo.png" alt="" /> 使用变量接收静态图片路径（必须使用 require） <img :src="imgSrc" alt="" /> data() { return { // Vue中js部分引入静态图片，必须使用require引入，否则无法正常显示 imgSrc:require(
react-blur：React组件使用画布模糊图像背景
02-05
var Blur = require ( 'react-blur' ) ; 例 The content. 有关完整示例，请参见的代码。 道具 img ：图像路径。 blurRadius ：可选。 模糊半径的大小。 enableStyles ：可选。 标记为包括基本样式，可省略此...
ReactNative Image组件使用详解
08-29
例如：<Image style={styles.image} source={require('./reactlogo.png')} />需要注意的一点是，上面 require 中不能用字符串拼接路径，否则会加载报错。 加载原生图片资源 ------------------ 加载原生图片资源...
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
react 入门，项目搭建
09-13
在React项目中，Webpack常用于处理JSX（JavaScript与XML的语法扩展，React的标志性特性），CSS，图片和其他静态资源。Webpack配置文件（通常命名为webpack.config.js）允许你定制打包过程，包括设置入口点、输出路径...
解决img 动态获取图片路径不生效
mxh_CSDN的博客
06-17 2729
img 动态获取src图片路径不生效问题
vue 前端 require动态引入图片报错Error: Cannot find ‘@/static/image/xxx.png‘
GoAyano的博客
12-30 3308
vue 前端 require动态引入图片报错Error: Cannot find '@/static/image/xxx.png'
vue3+element plus+vite 引入本地静态资源图片require报错的原因和解决方案，以及如何在表格中展示图片
m0_52043522的博客
06-02 4336
在写vue 3+element plus+vite 项目的过程中，require引入展示图片出现了报错，记录了一下错误原因和解决方法。
react使用require图片无法加载
认定的总要想办法去完成。
04-29 1099
踩坑记录  在react中使用require进行导入本地图片时，无法显示图片，仔细检查发现图片的base64编码是在default属性里面，如下：  顾在此进行require进行引入图片时，加入default即可，代码如下： <img src={require("./images/1.png").default} alt=""/>  加入.default后图片进行正常显示，踩坑结束。 ...
react-native------Image require正确使用姿势
weiyi_de_chengnuo的博客
11-14 5054
查到官网Note：Image require正确使用姿势
react-native之Image加载url图片问题
热门推荐
reylen的专栏
07-06 1万+
react-native之Image加载图片问题Image加载图片有两种方式，一种是本地资源，一种可以是网络图片，本地资源加载，如：<Image source={require('./images/add.png')}/>这种方式简单，都没有问题。通过url的方式加载图片，如： <Image source={{uri:'http://xxxxxxxx'}} style={{width: 90,
React中插入图片的几种方式
duansamve的博客
08-16 5639
import React from 'react' import logo from './asset/logo.jpg' export default class Login extends React.Component { render() { return (<> <img src={logo} alt="logo" /> </>) } }
react 图片绝对路径,使用React + Webpack时如何使用绝对路径导入自定义scss？
05-13
在 React + Webpack 项目中，使用绝对路径导入自定义 SCSS 文件可以通过以下步骤实现： 1. 在 webpack.config.js 中配置 alias，将自定义 SCSS 文件夹路径设置为别名。例如： ``` const path = require('path'); ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值