一、react中图片引入方式

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

<img src="../assets/zzsc1.png" />

  

  下面我总结了两种方式:

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

  

<img src={require("./zzsc1.png")} />

  

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

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

<img src={require("./zzsc1.png").default} />

  2、通过!important引入

import zzsc from "./zzsc1.png"

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

<img src={zzsc} />

   效果图如下:

然而有的时候你开发环境图片显示出来了,但是在打包后部署到测试环境上时会发现,图片又没了,抓耳挠腮,想不明白问题出在哪里。其实很简单,由于部署的时候增加了二级域名,但是打包后的文件l中引入的静态资源路径是从根目录引入的,其实在根域名下并没有这个静态资源,导致引入失败,无法加载,public为根目录,在打包时只能检索到你public文件夹下的图片,所以在放图片素材的时候,图片位置也非常重要!统一都放到public文件下即可。上代码:

<img src='images/zzsc2.png' />

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

  1. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  2. vue-cli3中引入图片的几种方式和注意事项

    如果你是在数据中引入图片,他是从项目中引入的应该按第一种方式引入 如果不是在数据中引入图片,按第二种方式引入

  3. 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  4. 解决!同一ajax请求获取的图片路劲,在谷歌浏览器能正确展示图片,在火狐浏览器则显示路径undefined

    今天的工作学习之路是解决了昨天的问题,可看我昨天的随笔了解问题. 非常感谢昨天各位积极地解答,在此我引用 @不带汽的可乐 的方法进行解决,问题其实挺简单就解决了,先说说原因,在火狐浏览器中,当我在js ...

  5. 如何在react&webpack中引入图片?

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  6. 如何在vue中引入图片?

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...

  7. Python中的绝对路劲和相对路径

    1.绝对路径 os.path.abspath("文件名"): 显示的是一个文件的绝对路劲 eg: >>> import os >>> os.ch ...

  8. react里面引入图片

    引入图片确实走了很多的坑,开始的认知里,所有静态页面都需要放在public里面能执行,代码是这样的 css .back{ background-image: url('/images/homeBack ...

  9. 关于vue项目中在js中引入图片问题

    <template> <div> <img v-for="(star,index) in stars" :src="star.src&quo ...

随机推荐

  1. 『忘了再学』Shell基础 — 2、Shell的作用与分类

    目录 1.Shell的作用 2.Shell的分类 1.Shell的作用 Shell除了能解释用户输入的命令,将它传递给内核,还可以: 调用其他程序,给其他程序传递数据或参数,并获取程序的处理结果. 在 ...

  2. 听听文档(视频)-Power Pivot

    打开微信扫描二维码

  3. 使用.NET 6开发TodoList应用(1)——系列背景

    前言 想到要写这样一个系列博客,初衷有两个:一是希望通过一个实践项目,将.NET 6 WebAPI开发的基础知识串联起来,帮助那些想要入门.NET 6服务端开发的朋友们快速上手,对使用.NET 6开发 ...

  4. 自己实现一个Electron跨进程消息组件

    我们知道开发Electron应用,难免要涉及到跨进程通信,以前Electron内置了remote模块,极大的简化了跨进程通信的开发工作,但这也带来了很多问题,具体的细节请参与我之前写的文章: http ...

  5. AT4151 [ABC099B] Stone Monument 题解

    Content 一个村里有 \(999\) 个房子,第 \(i\) 个房子的高度为 \(1+2+...+i=\sum\limits_{j=1}^ij\).现在下了一场雪,给定相邻两个房子没被雪覆盖的高 ...

  6. linux查看磁盘SN

    ls -l /dev/disk/by-id/ | grep -iE   <SN>

  7. 奇怪的现象,打印出来可以见到数据,在右边看不到数据,放到list里在页面上也显示不了数据

  8. centos7 升级php版本到7.2

    #自带的只有5.4版本 yum provides php [root@localhost etc]# yum provides php Loaded plugins: fastestmirror, l ...

  9. IDEA安装vue.js插件后,new没有Vue component

    首先要安装vue相关的插件vue.js 但是很多人安装vue.js右键发现没有vue Componment,解决方法如下 Settings>Editor>File and Code Tem ...

  10. win10+vs2015编译nanogui

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist 说明: A.OS : win10 1909 ,没有配置OpenGL开发环境的 经历. B. ...