在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了url可以很好的解决这个问题。在stackoverflow上对此问题也进行了详细的描述。

  

npm install url-loader --save-dev

  

  通过安装url-loader我们就可以在react&webpack项目中成功处理相对路径的问题。

  

  jsx中使用如下:

import React from "react"
require('../css/intro.less')
import protrait from '../images/portrait.png' class Intro extends React.Component{
render () { return (
<div className='intro-wrap'>
<div className="portrait">
<img src={protrait}/>
</div>
<div className="name">WayneZhu</div>
<div className="position">前端开发工程师</div>
</div>
)
}
} export default Intro;

也就是说通过url-loader我们就可以像使用组件一样通过 import 来引入了。 接着jsx中的js表达式要写在{}中。

  css中使用如下:

    div.phone {
background: url('../images/phone.png') no-repeat ;
}

  实际上也就是直接使用即可,因为url-loader解决的问题就是将路径成为可以处理的。

  参考文章:  https://survivejs.com/webpack/loading/images/

如何在react&webpack中引入图片?的更多相关文章

  1. webpack中的图片打包之路

    最近在Github上弄项目,需要搭建一个webpack开发环境.Emmm,是的,从0开始搭建一个项目确实不容易,光Webpack的坑就够我踩一路的了.这不,刚搭建到“图片打包”这里,就遇到了麻烦.最后 ...

  2. vue.js中引入图片

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

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

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

  4. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

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

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

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

    一.react中图片引入方式 以前我们用img引入图片只需要如下即可,在react中这样写会报错: <img src="../assets/zzsc1.png" /> ...

  7. 如何在React项目中直接使用WebAssembly

    前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...

  8. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

  9. 如何在vue项目中引入elementUI组件

    个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一 ...

随机推荐

  1. WSAGetOverlappedResult函数

    WSAGetOverlappedResult函数 通过WSAWaitForMultipleEvents函数来得到重叠操作完成的通知,那么自然也需要一个函数来查询一下重叠操作的结果,定义如下 BOOL ...

  2. VCS简介

    VCS -Version Control System 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 特征 1.记录文件的所有历史变化 2.随时可恢复到任何一个历史状 ...

  3. Linux基础--安装搭建tomcat+java+mysql

    一.安装jdk 1.可选安装yum -y install lrzsz方便传文件.(yum -y意思是所有的都选yes) yum update -y  更新yum镜像 yum list lrzsz* 列 ...

  4. shiro开启realm

    使用缓存,可以解决每次访问请求都查数据库的问题.第一次授权后存入缓存. 缓存流程 shiro中提供了对认证信息和授权信息的缓存.shiro默认是关闭认证信息缓存的,对于授权信息的缓存shiro默认开启 ...

  5. 《html5 从入门到精通》读书笔记(三)

    二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...

  6. Performance profile of a typical interior scene

    ------------------------------- Num faces: 7000k+ Num lights: 38 Num textures: 79 Textures on disk: ...

  7. leetcode 18 4Sum JAVA

    题目 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出 ...

  8. fatal: Authentication failed for又不弹出用户名和密码 解决办法

    各位,如果能弹出来,一定是你账号密码搞错了,就别继续看了.   image.png 切换命令行:   image.png 依然报错, 说到这个问题,又可以长篇大论了, 我使用的是tortoisegit ...

  9. Major compaction时的scan操作

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u014393917/article/details/24419355 Major compactio ...

  10. “全栈2019”Java第五十五章:方法的静态绑定与动态绑定

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...