相关疑难解决方法(0)

如何从本地目录加载图像并将其包含在reactjs img src标记中？

我有一个图像one.jpeg在与我的组件相同的文件夹内调用,我尝试了两个<img src="one.jpeg" />并<img src={"one.jpeg"} />在我的render函数内,但图像没有出现.此外,我无法访问webpack config文件,因为项目是使用官方create-react-app命令行util 创建的.

更新:如果我首先导入图像import img from './one.jpeg'并在里面使用它img src={img},这是有效的,但我有很多图像文件要导入,因此,我想在表单中使用它们,img src={'image_name.jpeg'}.

我正在构建一个小型反应应用程序,我的本地图像将无法加载.像placehold.it/200x200这样的图像加载.我想也许它可能是服务器的东西？github上的完整源代码.

这是我的App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzd?lání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history …

我正在尝试react-router为我的第一个React webapp 设置一个,它似乎正在工作,除了我刷新页面时我的嵌套页面没有加载css.

但它只适用于一个级别,/dashboard但css不会加载/components/timer

这是我的index.jsx文件的样子

import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';

render(
  <Router history={browserHistory}>
    <Route path="/" component={Dashboard}/>
    <Route path="/components/:name" component={WidgetComponent}/>
    <Route path="*" component={Dashboard}/>
  </Router>,
  document.getElementById('root')
);

知道为什么吗？

我正在尝试将本地图像导入 reactjs。但它不起作用。我正在使用 reactstrap 制作旋转木马。

这是错误

找不到模块：无法解析“C:\Users\adity\Desktop\foodcubo-dev\project\src\Layouts\header”中的“../../assets/img-3.jpg”

我尝试使用导入方法导入图像，尽管图像在资产中可用。我想进口没问题。问题可能与渲染有关。我不知道。

这是我的代码。

头文件.js

import React, { Component } from 'react';
import imgone from '../../assets/img-1.jpg'
import imgtwo from '../../assets/img-2.jpg'
import imgthree from '../../assets/img-3.jpg'

import {
  Carousel,
  CarouselItem,
  CarouselIndicators,
  CarouselCaption
} from 'reactstrap';

const items = [
    {
    src: {imgone},
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
    {
    src: {imgtwo},  
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
    {
    src: {imgthree},
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

class Header extends Component {
  constructor(props) {
    super(props); …

我有一个 Reactjs SPA，其文件结构如下所示：

在该应用程序中有一个简单的组件（Resume.js），我希望用户能够在浏览器中查看/下载pdf文件（resume_english.pdf）。然而，我无法在本地或在我计划托管 SPA 的 GitHub 页面中执行此操作。它总是将我重定向到主页。

Resume.js看起来像这样：

import React, {Component} from \'react\';\n\nclass Resume extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {};\n    }\n\n    render() {\n        return (\n            <div className={\'resume-container\'}>\n                <div id={\'resume-pdf\'}>You can view, download and print my r\xc3\xa9sum\xc3\xa9 in pdf format in <a\n                    href={\'./public/resume_english.pdf\'}>English</a> and <a href={\'#\'}>Spanish</a></div>\n            </div>\n        );\n    }\n}\n\nexport default Resume;\n

关于如何解决它可能有什么问题有什么想法吗？我已经尝试过像这样导入，但没有成功。