React :如何在src和公共文件夹之外加载图像
React 是一个用于构建用户界面的 JavaScript 库。在 React 中，可以使用 <img> 标签来加载图像。通常情况下，图像文件应该放在 src 目录下的某个子目录中，然后通过相对路径引用。
如果要在 src 和公共文件夹之外加载图像，可以将图像放在公共文件夹中，然后使用绝对路径引用。公共文件夹可以通过在项目根目录下创建一个名为 public 的文件夹来创建。
以下是在 React 中加载图像的步骤：
- 将图像文件放在
public文件夹中的某个子目录中，例如public/images。 - 在组件中使用
<img>标签来引用图像，使用绝对路径。例如，如果图像文件名为example.jpg，则可以这样引用：
<img src="/images/example.jpg" alt="Example" />在上面的代码中，/images/example.jpg 是图像的绝对路径。
这样做的好处是，图像文件不会被打包到最终的构建文件中，而是直接从公共文件夹加载，减少了构建文件的大小。
腾讯云提供了多个与图像处理相关的产品，例如：
- 腾讯云万象图片处理：提供了丰富的图片处理功能，包括缩放、裁剪、旋转、水印等。
- 腾讯云对象存储（COS）：可用于存储和托管图像文件，提供高可靠性和高可扩展性的存储服务。
以上是关于在 React 中如何在 src 和公共文件夹之外加载图像的答案。希望对你有帮助！
相关·内容
1回答
我正在做一个个人项目，有两件事一直困扰着我。这个项目是用React编写的，我正在使用一个快速节点应用程序作为后端。在我的前端，我可以加载和发送图像到服务器，我将文件保存在一个upload文件中，路径存储在一个mongo数据库中。 构建完成后，文件如下所示： ? 如你所见，我的上传文件夹在公共文件夹中。公共文件夹是react应用程序的内部版本。我刚给它重命名了。问题是，如果我想要更新构建，我必须将上传的文件保存在其他地方，然后在新的构建(公共)文件夹中重新引入它。对我来说这听起来不切实际。有没有办法绕过这一点？最佳实践？这将是第一件事。 第二个是我用来将图像文件夹链接到<img
浏览 12提问于2021-04-02得票数 0
回答已采纳
我有以下组件位于“project文件夹/src/page/Home.js”中：
import React from "react";
import MenuButton from "../components/Home/MenuButton";
import menuicon from "images/menuicon.png";
export default function Home() {
return (
<div className="container">
<div clas
浏览 1提问于2020-06-01得票数 1
回答已采纳
我通常在src文件夹下制作图像文件夹，所以我通过组件中的require require("images/sample.jpg")来访问它们。
我的朋友正在学习React，他正在努力加载图像，他在公共目录下创建了图像文件夹，如下图所示。这样，他就可以在没有require()的情况下访问图像，所以他只需要使用images/sample.jpg。我想我需要在React中使用require()来加载图片。
将图片文件夹放在公共目录下没问题吗？那么我们为什么要使用require()？
浏览 0提问于2018-11-07得票数 19
回答已采纳
在我的react中，我想要加载带有绝对路径的图像。我从api响应中获得作为字符串的路径。因此，不可能将图像文件夹放在src oder公用文件夹中。我读了几个堆叠式的问题，但到目前为止没有任何帮助。我要走的路是这样的
"\\SRMS508\Dokumente\1\Artikel\Art.Nr 100085\100085_CIMG7224.JPG"
这两件事都没有：
<img src="\\SRMS508\\Dokumente\1\Artikel\Art.Nr 100085\100085_CIMG7224.JPG"/>
不是这样的：
<img sr
浏览 2提问于2022-02-03得票数 1
1回答
我只想问一下如何在nextjs中正确导入图片和视频？我的图像不会加载到嵌套的路由页面上，比如这个-> localhost:3000/about/missionVision它可以在单一路径上工作，比如这个-> localhost:3000/about 这是带有图像的组件的代码，它不会加载到嵌套的路由/页面上。 import React, { Fragment } from "react";
const Banner= () => {
return(
<Fragment>
<header cla
浏览 165提问于2021-08-10得票数 0
回答已采纳
1回答
我想添加一个像这样的图像标记
img [ Src "/AirPassengerData.png" ]
但是当我看到生成的网站时，图像不会加载。
我使用的是dotnet核心项目模板fable-elmish-react
虽然我已经找到了这个Fable.Helpers.React.img助手，但是图像并没有出现在我的/public文件夹中，据我所知，这个文件夹就是webpack输出文件夹。
我遵循了的指令，试图让webpack将我创建的/assets文件夹中的图像移动到/public文件夹中，但是这些指令指示我添加一个require语句来要求加载图像，但是我找不到使用Fable如何做
浏览 1提问于2018-04-03得票数 3
回答已采纳
2回答
这是我的代码。我在"src“文件夹中有一个图像文件夹，我想使用我的components/Myapp.component.js中的图像
import React from 'react';
import imageOne from '../img/cool-img.jpg';
function Myapp() {
return (
<div className="myapp">
<h1>import image<h1>
<img src={imageOne}
浏览 0提问于2020-02-08得票数 0
我已经在我的laravel项目中使用npm安装了ReactJS和Babel。它们位于npm自己创建的"node_modules“文件夹中。但问题是，如果我使用下面的代码导入，我的react代码似乎不能工作：
<script src="node_modules/react/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/ba
浏览 0提问于2016-03-29得票数 1
我试图使用component.First时间显示数据和图像，但是当我刷新页面时，数据和图像都会消失。
这是按组件Team.js
import React from 'react';
const Team = (props)=>{
return(
<>
<h1>{props.data.name}</h1>
<img name="photo" src={require(`../images/${props.data.image}`)}/&
浏览 8提问于2022-03-16得票数 0
回答已采纳
当我在本地开发时，当我将/public文件夹放在/src/中时，就可以找到图像
# locally
./src/public/images/
然后，当我进行部署时，就找不到映像了。但是，当我将公用文件夹放置在src之外时，就可以找到图像：
# deploy
./public/images/
./src/
我把这些图像用作：
<img src="/images/my-image.jpg" alt="" />
是否有我必须使用的配置设置？
编辑：
全结构：
|- .now/
| |- project.json
| └── README.txt
浏览 3提问于2020-03-22得票数 5
回答已采纳
1回答
我有一个反应性项目，项目文件夹中的结构是：
- React Project
- Frontend
- src
- public
- data
- Backend
现在，如果我想加载一个图像，我将把它放在前端/public/data文件夹中，并在前端源代码中编写url='data/image.jpg‘。
但是我想要在后端文件夹中加载图像，我如何实现呢？谢谢！！
更新
后端文件夹中会有很多图像，我还想让用户上传应用程序中的图像，并将它们存储在后端文件夹中。因此，我不能用前端src代码逐个导入它们。
浏览 0提问于2020-06-14得票数 1
回答已采纳
24回答
如何从本地目录加载图像并将其包含在reactjs img src标记中？
在与组件相同的文件夹中，我有一个名为one.jpeg的图像，我在<img src="one.jpeg" />函数中尝试了<img src="one.jpeg" />和<img src={"one.jpeg"} />，但是没有显示图像。而且，我无法访问webpack config文件，因为项目是用官方的create-react-app命令行util创建的。
更新:如果我第一次用import img from './one.jpeg&
浏览 2提问于2016-10-12得票数 375
回答已采纳
我已经看到了加载图像的常用方式。
使用公用文件夹，然后将src normallyImport设置为图像，然后将其设置为normallyImport。
import myimage from "../../assets/images/img.png";
<img src={image}/>
需要图像内联
<img src={require(`../../assets/images/img.png}`)} />
我想看看是否有类似于角的方式，当你为一个图像设置src并且导入被自动处理的时候？我假设我必须使用HTMl-加载程序和文件加载器
我在找这个的时候发现
浏览 1提问于2021-11-14得票数 0
1回答
我需要使用resium to在react组件上加载一个kml文件。我已经遵循了如下所示的官方resium页面中所示的确切程序。
我尝试从of的官方github页面加载示例kml文件。我已经下载了这个sampleData文件夹，并放在react项目的文件夹下。然后尝试加载，如下所示。
import React from "react";
import { Viewer, KmlDataSource, GeoJsonDataSource } from "resium";
const data = {
type: 'Feature',
pr
浏览 1提问于2021-06-08得票数 0
我试着在画布上装一个图像。这是我用来做这个的代码。
import React, { Component } from 'react';
class Image extends Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
}
componentDidMount() {
const canvas = this.canvasRef.current;
const context = canvas.getContext(
浏览 2提问于2019-10-24得票数 3
我收到了这条错误消息
加载资源失败:服务器响应状态为404 (未找到)
我有一个文件class_start_paperwork.php文件，它在包含文件夹中创建pdfs和jpgs到私有文件夹。
所以
我试图在user_group_start_paperwork_esign2.php文件中显示图像，该文件位于public_html文件夹中。
"/root
/private
/scratch
/1387.2742.1487969899-0.jpg"
"/public_html
/include
浏览 4提问于2017-02-25得票数 1
1回答
我正在使用Nodejs和Reactjs开发一个web应用程序，目前我正在从mongo数据库中检索数据并使用Reactjs显示数据。
以下是一些代码：
import React, {Component} from 'react';
import axios from '../../node_modules/axios';
import {Col,Card} from 'react-bootstrap';
import {BrowserRouter as Router,Link, useRouteMatch} from 'react-rou
浏览 1提问于2020-02-18得票数 1
回答已采纳
我和react-router-dom有create-react-app项目。
在SPA中，我有几个类似于页面的组件。所有页面都有相同的组件：
return (
<img
src="/images/logo.png"
width={this.props.width}
height={this.props.height}
className="d-inline-block mb-2"
alt="Logo"
/>
);
每次我用r
浏览 5提问于2020-03-23得票数 0
我正在使用React引用一些名称中有空格的(本地)图像。例如。
<img src={`/images/${user.name}.jpg`} />
但是，React无法加载/渲染图像。图像位于/public文件夹中，我仔细检查了文件名/路径。我还尝试使用encodeURIComponent()作为路径，但也不起作用。但是，当我删除图像名称中的空格时，React能够正确地渲染图像。
浏览 0提问于2020-10-28得票数 0
我将我的所有图像保存在react的src文件夹中，当用户上传图像时，我将此图像保存在此文件夹中，但是当我运行用于将应用程序部署到heroku的构建命令时，应用程序无法从src中找到图像，并且用户可以上传图像和此图像保存在src文件夹中，但我无法使用它，因为当我创建构建文件夹时，图像不在src文件夹中，而当我尝试将图像保存到构建文件夹中时，这也不适用于我 如何导入图像 <img src={require(`./../../photo/${user.photo}`)} alt="UserPhoto" className="imgsrc" &
浏览 31提问于2020-06-30得票数 0
我正在尝试将React应用程序加载到asp.Net视图(项目最初是用asp.net编写的，我正在使用React创建新页面，用于学习和娱乐)。 当React应用程序在dev move中运行时，所有图像在所有路径正常工作的情况下加载时都没有任何问题。 使用npm run build构建应用程序后，将生成js文件和相应的图像文件，我将它们放在asp.net应用程序的文件夹中(例如，脚本文件夹)。 当我尝试查看页面时，React应用程序加载并呈现屏幕，但由于网站找不到图像，所有图像都损坏了。 在查看图像未加载的原因后，由于图像试图从当前URL加载，而不是从js文件和图像存储的位置加载，导致出现404
浏览 23提问于2019-10-14得票数 0
1回答
在React中:我无法从我的CSS文件加载背景图像。通过研究，我了解到我应该将图像文件夹放在src文件夹中，而不是公共文件夹中。所以我移动了我的图像文件夹。我的CSS文件中的背景图像现在可以工作了，但React找不到任何其他图像，就像以前一样。
我有这样的代码：
setImage(`./images/${temp.img_bg}`);
和
<img src="/images/logo.png" alt="Logo" />
我尝试了不同的路径，但都无济于事。
浏览 4提问于2021-09-15得票数 0
1回答
我有一个问题，定义图像路径在反应应用，这是越来越令人沮丧，所以我寻求专业人士的帮助。我在公共和src之间来回移动图像文件夹。当背景:url(路径)工作时，img src="path“不工作，反之亦然。我得到了这个错误" error :无法解析'images/img-2.jpg‘in’/Applications/MAMP/htdocs/react/src‘“。如果我将图像文件夹移到src，它可以工作，但是后台:url(Path)不会加载图像。我在有个项目。另一个问题是github页面；我已经在gh-pages ()中设置了这个项目，但是它只加载到导航和停止。不会装上身体。
浏览 8提问于2021-02-14得票数 1
回答已采纳
我正在构建一个带有React和MySQL的桌面应用程序，我只将图像名存储在MySQL中，而实际的图像存储在/src/images中的图像文件夹中，当将新图像上传到图像文件夹时，react应用程序会重新加载，因此为了避免这种情况发生
我要么需要将图像存储在MySQL DB中。
在本地访问图像，而不是在/src中，而是在像D:/images/*这样的外部访问。
但react有一些进口限制。
我如何解决这个问题，请分享您的知识。
浏览 3提问于2020-08-20得票数 0
回答已采纳
我正在使用react作为我的应用程序。我有一个div，我想要一个背景图像。但我不能让它显示出来。
当我将它作为src文件夹包含为myapp/src/bgimage.png时，它工作得很好，但我听说我应该将它包含在根级名为images的文件夹中，因此它是myapp/images/bgimage.png，但是这对我不起作用，并给出了如下结果：
您试图导入项目src/ director.png之外的./映像/bgImage.png。
有人能告诉我在reactJS中包含图像资产的正确方法吗？
浏览 15提问于2017-06-20得票数 102
我有一个json文件，在这里我存储我的svg图标和其他我想要显示的信息的路径。在组件中，我映射存储在该文件中的数据。它显示了我存储的所有数据，除了图像。当我转到以下目录(图标文件夹位于公用文件夹中) 时，我可以看到图像，因此这意味着路径是正确的。另外，当我直接将一个图像(当图标文件夹在src文件夹中)导入到组件并在img属性中使用它时，也会显示svg图像。你知道怎么修吗？这就是我所看到的
json文件结构
[
{
"id":0,
"language": "English",
"
浏览 0提问于2020-11-04得票数 0
当使用XAMPP时，我正在加载一个页面(index.php)，并使用MySQL获取我想要使用的图像的目录。这是执行以下操作的代码块的片段：
<img src="<?php echo $resource['main_image'];?>">
我知道php代码是有效的，因为当我检查localhost上的页面元素时，我得到了
<img src="assets/images/defaults/default_pic.png">
此映像存在于文件夹中，但在运行服务器时似乎没有加载。当我检查元素并单击源时，图像文件夹没有来
浏览 4提问于2020-08-14得票数 0
回答已采纳
我已经把这个包括在我的index.html里了。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
但是没有显示任何图像，例如，我的src文件夹中有tech.png，其中包含Sample.js和index.js文件。
这是我的Sample.js文件：
import React from 'react';
import { Image} from 'sem
浏览 0提问于2018-03-02得票数 0
回答已采纳
因此，我有一个具有此结构的React应用程序
-MyApp
-public
--images
---Adam.png
---Jane.png
-src
--components
对于我的一个组件，我想显示所有的图像。有没有办法获得我的public/images文件夹中的文件名数组？我知道如何将数组映射到图像列表，但不确定如何首先获得该文件名数组。
浏览 0提问于2020-08-18得票数 0
我正在做一个使用create- React -app构建的react项目，我对如何使用useEffect()引用本地JSON文件感到困惑。
我的目录结构如下：
public
src
components
data
test.json
App.js
在App.js中，我使用useEffect()和fetch()来获取JSON文件。
useEffect(() => {
const getData = () => {
fetch('./data/test.json'
,
浏览 39提问于2021-03-08得票数 0
回答已采纳
1回答
我试图建立一个反应组件，显示一个360度的产品视图。我试图将脚本转换成一个反应组件，它使用jQuery显示可拖放的360度产品图像。
这个脚本的工作方式是第一次加载产品的20幅图像，每个角度高达360度。然后，利用jQuery，根据鼠标点击和移动事件自动切换图像。
作为我的React组件的一部分，我成功地从一个文件夹中加载了图像，并试图根据鼠标单击和移动事件来切换图像。此外，我还发现了文章，它创建了图像的3D透视图，并具有一些用于反应合成事件的有用功能。
如何使用反应合成事件捕捉鼠标单击和移动事件，以便切换到数组中的下一个图像？
import React, { Component } from
浏览 1提问于2018-08-25得票数 1
回答已采纳
我正在使用react和laravel，图像保存在后端文件夹中，我如何在前端显示它？ 我使用以下路径 <img src="http://localhost:8000/public/avatar/images.png"/> 但是不起作用
浏览 16提问于2021-10-04得票数 0
回答已采纳
2回答
我一直试图在我的React应用程序上动态加载背景图片，但只有当我链接到我的Google drive时才能起作用。我想在本地执行此操作，并且我已将图像粘贴到即时目录中。但它仍然无法加载到我的应用程序中。我有21个图像从0-20所有png格式在src文件夹中 var bgp = Math.floor(Math.random() * 20);
this.setState({
chrome: color,
photo: bgp,
quote: randomQuote.quote,
author: randomQuote.name
})
render() {
var bodyP
浏览 31提问于2020-09-28得票数 2
我创建了一个简单的Angular库，我希望我的库也能显示一个图像。问题是，如果我将图像包含在我的库的模块文件夹中，然后从模块内部引用它，我会得到404错误。据我所知，在Angular项目中，图像必须放在/assets文件夹中，但我真的需要将此图像包括在我的库中。 我将图像放在模块文件夹中，并从我的模块组件<img src="myImage.png">的.html文件中引用它，但它不工作。
浏览 64提问于2017-10-26得票数 10
回答已采纳
我将图片上传到我的应用程序storage/app/public/avatars目录。这些文件正在上传，并且在这个文件夹中-我已经检查过了。并加载页面显示的图像，只要我是在我的本地电脑。然后，我将项目转移到一个共享主机。从那时起，图像就不再加载了。从铬控制台网络选项卡，我可以看到的图像，拉拉是抛404错误。
以下是我尝试过的：
在远程机器上，我将公共文件夹中的符号链接重新创建为指向该文件夹的存储。
尝试将图像src直接复制并粘贴到浏览器获取NotFoundException中的RouteCollection.php中。
清除视图、缓存、配置缓存
花了5个小时才弄清楚。在本地电
浏览 0提问于2018-01-27得票数 0
在将图像导入src文件夹后，我尝试使用以下代码。但我看不见图像显示。如何解决这个问题？
我的反应码是这个。
import React from 'react'
import burgerLogo from '../../assets/images/burger-logo.png'
import classes from './Logo.module.css'
const logo=(props)=>(
<div className={classes.Logo} style={{height:props.height
浏览 16提问于2020-10-18得票数 2
回答已采纳
2回答
我正在和Webpack一起做一个React设置，并且正在努力做看起来应该是一项简单的任务。我想让webpack包含一些图片，并且最小化它们，就像我吞咽一样，但我想不出来。我只想能够像这样在我的css中链接一个图像：
/* ./src/img/background.jpg */
body { background: url('./img/background.jpg'); }
我所有的css/js/img文件夹都在一个src文件夹中。Webpack输出到dist文件夹，但我不知道如何在那里获得图像。
这是我的webpack设置：
var path = require('
浏览 42提问于2016-02-13得票数 50
回答已采纳
1回答
我使用Visual Studio提供的模板创建了一个托管在.Net核心后端的React应用程序。 最后，我遇到了一种奇怪的行为:当包含本地保存的图像的组件第一次呈现时，图像会在大约1/2秒的延迟后显示。下一次，组件将使用已显示的图像正常呈现。 当我使用来自互联网的图片时，这个问题不会发生。举个例子： <img src="www.google.com/example.png" alt="random image"> 图像会立即加载。 额外的信息是，当我启动React应用程序和.Net核心服务器时，这个问题就会发生，所以它们共享同一个端口。当我使用np
浏览 32提问于2020-09-28得票数 1
不知道有没有人能帮我。我正在遵循一个教程，该教程告诉我将图像放在使用create-react-app创建的应用程序的公共文件夹中
'./img/newyork.jpeg‘
这是教程告诉我用于公用文件夹中的图像的路径，但是图像没有加载，我不明白为什么需要任何帮助
浏览 7提问于2021-02-18得票数 1
2回答
尝试将图像加载到react中，这只是一个测试，最终我会将其全部保存在一个数组中，该数组保存为数据以供切换。然而，我不能得到图像加载，我经常得到找不到模块，我已经安装了网址和文件加载程序，我已经尝试将图像文件夹放置在不同的位置，它目前在src中。我可以从CSS文件中加载相同的图像作为背景。 import React, { useState } from 'react';
import Scoreboard from './Scoreboard';
import './CSS/Game.css';
import Data from './D
浏览 37提问于2021-01-23得票数 0
我不知道还有什么办法解决这个问题。我试过几个在网上见过的建议，但都没有用。我在和拉拉7合作
我的视图没有从我的公用文件夹中加载任何文件。即使是从视图上传到目录的图像在调用时也不会加载回视图。我已经将存储和公共目录进行了符号链接。然而，我注意到我创建的存储文件夹是一个快捷方式，但我希望这应该是正确的。
这些是我记得我试图从目录调用图像的不同方式，例如
<img src="{{ asset('storage/cover_images/img1.jpg') }}" alt="">
<img src="{{ URL::ass
浏览 3提问于2020-05-07得票数 0
回答已采纳
我从'src‘文件夹中获取图像(应用程序是用’创建-反应-应用‘创建的)。
... 节点js服务器
client
- /images
- index.js
- package.json
- ...
- public
我有表单，它在提交后将一个新图像上传到文件夹'client/src/images'.在该页面自动重新加载之后。我有数据库和用户模型，这个模型有字符串格式的图像。因此，在提交表单之后，将创建一个新的映像，并将其推送到'/images'文件夹中，这将导致页面重新加载。我要阻止这一切。如何禁用对监视此特定文件夹的
浏览 2提问于2020-11-06得票数 0
回答已采纳
我有一个角度项目和主页主要是HTML。当我输入"npm start“时，所有图像都成功加载。当我键入"npg build --base-href "/MyProject/“--prod时，当我用唯一的端口创建自己的网站时，主页是空白的。
加载资源失败:服务器响应状态为404 (未找到)。
对于它尝试加载的每个图像
在HTML代码中，它具有以下内容：
<div> <div><p> <img alt="" src="/assets/img/image123.png" /></a>&l
浏览 0提问于2018-11-08得票数 0
13回答
Im在ReactJS中是新的，我想在组件中导入图像。这些图像位于公用文件夹中，我不知道如何从react组件访问该文件夹。
有什么想法吗？
编辑
我想在Bottom.js或Header.js中导入一个图像
结构文件夹是：
我不使用webpack。我应该吗？
编辑2
我想用webpack来加载图像和其他资产。因此，在我的配置文件夹中，我有下一个文件：
我需要添加图像的路径，以及如何添加？
谢谢
浏览 18提问于2017-11-09得票数 202
回答已采纳
3回答
我是在一个投资组合网站上工作，与不同的客户/项目，我工作过的每个有自己的信息页面。我还没有完全确定我想要在哪里托管图像，但现在我正在构建这些单独的项目页面，希望只在本地加载图像。目前，我在编写的代码中没有收到任何错误，但是我的图像没有在浏览器中呈现。我怀疑这可能是因为没有一个<img>元素被附加到任何东西中，但老实说，我不确定。我还能错过什么？这与Webpack的吐露有关吗？
注意： img标记上的src属性正按照原样使用到public文件夹的正确路径。
App.js
import React from "react";
import { BrowserRouter
浏览 7提问于2022-11-01得票数 0
3回答
我想从本地文件夹的图像中设置容器div的背景图像。有人知道我需要在代码中添加什么吗/如何编辑它才能做到这一点？由于某些原因，目前图像无法显示。
class Team extends React.Component{
render(){
let style = {
backgroundRepeat: 'no-repeat',
backgroundImage:'url("../images/Football_Field.png")',
backgro
浏览 0提问于2019-10-19得票数 2
目标是：
我在一个高度为0的容器中有一组图像。当单击触发器时，我希望容器向下滑动(动画)并延迟加载图像(使用延迟加载jQuery插件)。
标记：
<a href="#">Trigger 1</a>
<div class="container-1">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
<img data-src="http://actualimag
浏览 5提问于2013-07-20得票数 1
我正在尝试通过对象数组进行映射。
在我的json中，staff中的每个数组元素都有一个imgUrl
{
"home": {
...
"staff": [
{
...
"imgUrl": "../Images/Jon.JPG",
...
},
...
],
...
}
...
}
浏览 4提问于2017-09-20得票数 2
我在我的ReactJs项目的src/assets/images文件夹中有一个图像。在不使用相对路径的情况下，我如何在CSS文件中使用它作为背景图像？
我在jsconfig.json中添加了compilerOptions.baseUrl中的src文件夹，所以在js文件中我可以这样做：
import logo from 'assets/images/logo.svg'
<img src={logo} />
但是css文件呢？我有几个文件夹，我想避免难看的字符串，比如
background-image: url(../../../assets/images/logo.sv
浏览 0提问于2019-07-23得票数 6
回答已采纳
我有困难，一些背景图像没有加载。我对最初的create应用程序做了一些重要的修改，我的文件夹结构现在如下：
注:我省略了一些文件和文件夹，如果您需要更多，请告诉我。
App/
node_modules/
src/
client/
build/
node_modules/
public/
src/
css/
App.css
images/
tree.png
yeti.png
App.jsx
server/
package.json
Procfile
以下是我为创建这个问题所采取的步骤：
$ cd
浏览 4提问于2016-12-01得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
