create-react-app 引用本地图片无效问题

最新推荐文章于 2024-04-24 16:52:11 发布
原创 最新推荐文章于 2024-04-24 16:52:11 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react

本文介绍了一种常见的前端开发中图片资源加载失败的问题，并提供了解决方案。通过使用正确的导入方式，可以确保图片资源能够被正确加载并显示。

问题：<img src="../images/photo.png" />无效

解决方法：

import imgURL from '../../images/photo.png';

...

...

<img src={ imgURL }/>

【开发问题解决】npx create-react-app 无法执行安装的问题处理
开发的那些事儿
12-28 3183
在使用npx create-react-app 命令，得到命令行反馈 You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.2). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: -
react脚手架 create-react-app 不是内部命令无法执行
初冬听雪的博客
02-18 2141
最近在弄react，刚开始安装node.js，node -v和npm -v都可以使用，参考网上的使用方法，在node的安装目录下创建一个node_global和node_cache目录，然后npm config set 配置两个目录，最后配置环境变量。 这里有些注意事项：1、node.js的环境变量不要去修改，我试过，修改后运行node -v就无效了，不是内部命令； ...
create-react-app JS里使用图片
liuyuqin1991的专栏
06-04 2580
1.JS加载图片 import img from '../../image/xxx.png' 2.JS使用图片 const item = [{ type:"bar", barGap:"5%", barMaxWidth:"20", barMinHeight:"10", itemStyle:{ normal: { label:{ sho...
create-react-app中img图片不现实
weixin_34178244的博客
03-12 711
场景：正常的情况下是这么引用图片，我的图片路径是 src/images/login-from-icon1.png <img src="../images/login-from-icon1.png" alt=""/> 结果：不能现实图片 解决： 方案一： 可以把图片放到public文件中，这里的图片路径是 public/img/login-from-icon1....
使用create-react-app,配置proxy报错（options.allowedHosts[0] should be a non-empty string）
最新发布
sgjy_15522801752的博客
04-24 1245
最后翻看源码发现是因为本地网路的问题，我本地的网路连接之后的ip是172.200.0.32，在源码中有一段判断的正则，没有命中，结果导致的这个启动报错！这里可能人家写的正则没有包含到所有的ip，所以再我换了有线网路，改为192.168的ip之后就不报错了。，其实不用像网上说的使用http-proxy-middleware，或者是改配置内容。看看你本地的ip是否能被人家的正则命中。灵感来着于这个回答的最后一个评论说网路的问题。在网上找了好多解决方案都没有解决问题。
【REACT】使用create-react-app创建的项目中如何引入CSS样式
u014458962的专栏
03-12 1712
第一步，做好静态的HTML页面，确定最终要呈现的结果，同时也帮助后面划分组件。 然后，使用create-react-app创建好项目。 那么接下来，要如何将静态HTML中引用的css样式转移到react项目中呢？ 首先，将所有要用到的css文件放到src文件夹下。最好不要改变css文件本身的层级结构，不然后面改路径太麻烦了。 接着，进入入口js文件，我的项目中是index.js。...
React 中加载本地图片（react）
0.0 的博客
01-26 6968
React 中加载本地图片有两种方式可以选择： import（建议） React 中在加载本地图片时，如果直接使用相对路径引入图片会出现报错，需要采用以下方式导入图片后再渲染： import logo from './assets/logo.png' <img src={logo}/> 其他图片还是和常规的使用方式一致。 require const imagePath = "./assets/logo.png" <img src={require(`${imagePath}`)
create-react-app使用antd按需加载的样式无效问题的解决
10-17
总结来说，解决Create React App使用antd按需加载样式无效的问题，主要依赖于正确安装并配置babel-plugin-import插件，通过配置.babelrc文件或直接在webpack配置文件中添加对应的插件配置。这样一来，就可以确保antd...
关于create-react-app不能使用less的两种解决方法(实现按需打包)
Sixology的博客
10-15 2027
使用create-react-app这个脚手架默认搭建的项目工程中是不能使用less的 我个人的解决方法有如下两种 1.修改create-react-app的webpack配置 1.运行npm run eject，会多出两个目录config和scripts，此时可以在config目录下看到配置文件webpack.config.js。 2.下载less和less-loader // 使用npm npm install less less-loader --save-dev // 使用 yarn yarn
【react】在create-react-app项目中使用图片路径的三种方式，亲测有效
AC_greener的博客
02-26 5303
1. 引入图片：import imgUrl from ‘…/src/a.jpg’, render() { return ( &lt;div &gt; &lt;img src={imgUrl } /&gt; &lt;/div&gt; ); } 2. 利用webpa...
【react】页面中引用本地图片
我叫陈小皮。
07-26 2万+
方法一：<img src={require('../img/icon1.png')} alt="" />方法二：import search from '../img/search.png' import user from '../img/user.png'<img src={search} alt="" /> <img src={user} alt="" />方法三：(不推荐使用)<img src
ES6 React 组件引用本地图片问题
热门推荐
zhengjie0722的博客
12-21 3万+
最近在用create-react-app 脚手架自己写一个小项目，遇到了很多坑，其中有一个就是React 引用本地图片的问题，我的需求是，图片的路径写在json文件里，需要从后台读取json文件，然后读取到图片的路径，在前端渲染。那么问题来了，es6不支持在标签内直接写图片的路径，即： 这种格式是不支持的。在网上看了很多博客，总结下以下几个加载的方法，当然，这种是在图片不多的情况下可以采用。
在react项目中引入本地图片不生效问题
weixin_58350627的博客
05-17 1683
在学习react项目的时候遇到图片不生效的问题。 使用require导入图像。需要加一个default <img src={require('./images/headers/xxx.png').default} alt="" /> 使用import导入(推荐) import logoImg from "./images/logo/logo.png" <img src={logoImg} alt=""/> ...
解决create-react-app build 后静态资源文件夹(static)路径不对
Chad97的博客
08-07 1万+
Reason 在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下，这样的情况就好出现服务器访问 index 找不到static 下面的资源，仔细看我们会发现访问路径变成了根文件 例如： www.test/build/static/cs.css # 变成 www.test/static/cs.css 因为我们的webpack 默认以项目为根目录 ho...
react 引用背景图片及图片问题
qq_16591861的博客
02-28 6331
刚入手学习react，遇到引用静态文件问题，查了很多资料，整理下； jxs引用图片的时候网上查大多说的是 import img1 from "@/img/database.png";这种类型； 直接使用&lt;img src={img1 } alt="" /&gt;方式； 只是项目中改动图片几率是非常大的，每改一次图片就要打包发布是非常麻烦的；所以有了如下方法引用文件的所有图片形成数...
React项目build之后资源文件路径 问题解决 背景图片
爱睡的虫虫
07-27 5467
找到node_modules -&gt; react-scripts -&gt; config -&gt; paths.js 修改 function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl ||...
react-app中如何引用本地图片资源
人间草木
02-26 2275
    方便你复制~~~ import React, { Component } from 'react' // 引入图片 方法1 import imgs from '../../images/test.jpg' class wordOfMouth extends Component { render() { return ( &lt;div classN...
React的行内样式
zeroyulong的博客
08-21 1万+
使用React的行内样式设置样式 (1)在JSX文件中定义样式变量,和定义普通的对象变量一样 let backAndTextColor = { backgroundColor:'blue', color:'#ff671b', fontSize:40 };   (2)JSX的调用 &lt;div style={backAndTextColor}&gt;行内样...
项目nginx部署到非根目录下react配置（基于create-react-app的打包文件路径问题）
zeroyulong的博客
01-17 5044
  执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在服务器根目录访问 若需要访问在根目录下的子目录，只需修改package.json文件 添加 "homepage":".", 即可  ...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值