react图片引入不显示怎么办

藏色散人

发布时间：2023-01-03 15:30:58

3780人浏览过

来源于php中文网

原创

react图片引入不显示的解决办法：1、通过“”方式引入图片；2、通过“import zzsc from "./zzsc1.png"”方式引入图片，然后在img中直接引入变量即可。

react图片引入不显示怎么办

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react图片引入不显示怎么办？

react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题

一、react中图片引入方式

　以前我们用img引入图片只需要如下即可，在react中这样写会报错：

@@##@@

下面我总结了两种方式：

1、用require方式引入路劲错误用法：

@@##@@

上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符串。这是因为在file-loader中，esModule选项是默认启用的。

Magician

Figma插件，AI生成图标、图片和UX文案

下载

所以用以下方式之一导入图像：后面加上.default即可

@@##@@

2、通过!important引入

import zzsc from "./zzsc1.png"

然后在img中直接引入变量即可，这个变量名字可任意取

@@##@@

效果图如下：

react图片引入不显示怎么办

然而有的时候你开发环境图片显示出来了，但是在打包后部署到测试环境上时会发现，图片又没了，抓耳挠腮，想不明白问题出在哪里。其实很简单，webpack在打包是只能检索到你public文件夹下的图片，所以在放图片素材的时候，图片位置也非常重要！统一都放到public文件下即可。上代码：

@@##@@

在打包是你路劲前面如果加“./”，则需要写全部路劲，不加更省事儿

推荐学习：《react视频教程》

2024前端面试题目 2024年最新前端面试题汇总大全

2024前端面试题浅到深

2024前端面试题及答案

2024前端面试题高频

Angular与React：2024年前端选择哪个

相关标签:

react webpack require 字符串 public default

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：react怎么实现密码隐藏功能下一篇：node 连接mysql失败怎么办

作者最新文章

一文详解通过php+roadrunner实现grpc服务端

2023-04-21 15:57

分享redis多维度排行思路

2023-04-21 16:01

linux jboss是什么

2023-04-23 10:10

linux中yum是什么意思

2023-04-23 10:15

分享一个PHP免费验证码（附代码）

2023-04-23 17:33

详述file_get_contents、getimagesize严重耗时问题

2023-04-23 17:36

用八个demo搞懂Go语言defer的五大特性

2023-04-23 17:40

图文详解如何在Vue项目中集成Ace代码编辑器

2023-04-24 10:52

聊聊前端怎么获取电池信息

2023-04-24 10:55

分享接口设计文档的12个注意点

2023-04-24 10:58

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容，可以阅读本专题下面的文章。

465

2023.11.27

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

254

2023.08.03

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

206

2023.09.04

java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友，请阅读本专题下面的的有关文章，欢迎大家来php中文网学习。

1463

2023.10.24

字符串介绍

字符串是一种数据类型，它可以是任何文本，包括字母、数字、符号等。字符串可以由不同的字符组成，例如空格、标点符号、数字等。在编程中，字符串通常用引号括起来，如单引号、双引号或反引号。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

617

2023.11.24

java读取文件转成字符串的方法

Java8引入了新的文件I/O API，使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java，可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中，你需要将文件路径替换为你的实际文件路径，并且可能需要处理可能的IOException异常。想了解更多java的相关内容，可以阅读本专题下面的文章。

548

2024.03.22