由于我在使用此脚手架的时候在引用本地图片的时候存在各种问题，特发此博客！！
首先，我们要知道，使用脚手架搭建项目前期需要的图片没有的话，就得引用本地图片，后期项目上线的话，图片地址是在线地址，因此项目上线之后就不需要担心路径问题。
那么，本地图片的路径应该怎么引用呢？
两种方法：

1、把图片放到public文件夹中的使用方式
在img的src中直接写基于public里面的index.html的路径
2、就是不把图片放到public中放到src文件夹下新建一个assets的文件夹图片放到其中
在img中使用require来进行引用路径就是当前引用图片的组件相当于assets文件夹的相对路径

此种方式的写法

<img src={require("../assets/logo.svg")}/>

背景图片
把图片放到assets中
其次在组件的render中创建如下内容

render() {const bgGround={路径是和之前require引用图片的方式一样  当前组件相对于asstes的相对路径background: `url(${require("../assets/logo.svg")})`}
········
·······}

在需要添加背景图片的位置
传入

<div class="div" style={bgGround}>123</div>

博客表达不清晰，请指明！谢谢！

create-react-dom脚手架中图片的路径问题相关推荐

Android获取相册中图片的路径 4.4版本前后的变化
两个问题: 1. 通过调用系统Action,从图库中选择图片,并展示到界面上 2. API19前后获取相册图片路径详见(仅客户端代码),请移步:本人GITHUB Intent intent = ne ...
HTML中图片的路径
一.图片的路径分相对路径和绝对路径. 1.相对路径分同一级路径和上一级路径.下一级路径. 相对路径分类符号说明同一级路径同一级路径直接写图片文件名就行如<img src=" ...
如何获得images.xcassets 中图片的路径？
UIImage加载图片的方式以及Images.xcassets对于加载方法的影响图片缓存根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...
MacOS中图片的路径表示
但凡需要UI的程序,都要涉及图片,习惯win的图片路径: D:\test1\\a.png Mac右键"显示简介"得到的路径,"‎⁨Macintosh HD⁩ ▸ ⁨用户⁩ ...
django 调用数据库图片的路径并在html显示
1.数据库有关图片的字段为图片的存储路径(mysql varchar类型). [注]设置的图片存储路径为/static/media/product_pic 2.在views.py文件内编写获取数据库全 ...
Python中图片处理方法（总结）
Python中图片处理方法 -- 进阶一级目录 1.Python中将源文件夹中图片复制到指定文件夹 2.Python中获取文件夹内指定后缀的所有文件的文件名三级目录一级目录 1.Python中将 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
js获取html中图片路径,用js快速的获取html页面中图片的地址
这次给大家带来用js快速的获取html页面中图片的地址,用js快速获取html页面中图片的地址的注意事项有哪些,下面就是实战案例,一起来看一下. 这篇文章主要介绍了js获取html代码中图片地址的实现 ...
在Vue-cli脚手架中引入图片最常用的两种方法
CommonJS API定义了很多普通应用程序(主要指非浏览器的应用)使用的API,require就说其中之一,我们通常需要在组件中引入图片时,可以在Data里使用这个方法require(" ...

create-react-dom脚手架中图片的路径问题

博客表达不清晰，请指明！谢谢！

create-react-dom脚手架中图片的路径问题相关推荐

最新文章

热门文章