在react js中加载本地图像 [英] load local images in react js

问题描述

我已经使用--create-react-app安装了反应。它安装正常但我试图在我的组件（Header.js）文件（路径-src / components / common / Header.js）中加载图像，但它没有加载。这是我的代码 -

I have installed react using - create-react-app . it installed fine but i am trying to load image in one of my component (Header.js) file (path -src/components/common/Header.js) but its not loading. here is my code -

import React from 'react'; 

export default () => {
    var logo1 = (
        <img 
        //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
        src={'/src/images/logo.png'}
        alt="Canvas Logo"
        />
    );
    return (
            <div id="header-wrap">
                <div className="container clearfix">
                    <div id="primary-menu-trigger"><i className="icon-reorder"></i></div>

                    <div id="logo">
                        <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
                        <a href="/" className="retina-logo" data-dark-logo='/images/[e-mail]'><img src='/var/www/html/react-demo/src/images/[e-mail]' alt="Canvas Logo" /></a>
                    </div>
                </div>
            <div>
            );
    } 

我的logo1变量中的

如果我正在写图像路径为 - src = {require（'./ src / images / logo.png'）} 然后给出以下错误 -

in my logo1 variable if i am writing image path as - src={require('./src/images/logo.png')} then its giving below error -

失败编译。

./src/Components/common/Header.js中的错误
未找到模块：/ var中的./scrc/images/logo.png / www / html / wistful / src / Components / common

Error in ./src/Components/common/Header.js Module not found: ./src/images/logo.png in /var/www/html/wistful/src/Components/common

请帮我解决这个问题，让我知道我在这里做错了什么。

Please help me to solve this, let me know what I am doing wrong here.

推荐答案

如果您对创建 React App 有疑问，我建议您阅读用户指南。$
它回答了这个以及你可能遇到的许多其他问题。

If you have questions about creating React App I encourage you to read its User Guide.
It answers this and many other questions you may have.

具体来说，要包含本地图像，你有两个选择：

Specifically, to include a local image you have two options:

1. 使用导入：

// Assuming logo.png is in the same folder as JS file
import logo from './logo.png';

// ...later
<img src={logo} alt="logo" />

这种方法很棒，因为所有资产都得到了处理通过构建系统，将在生成版本中获取带有哈希的文件名。如果文件被移动或删除，你也会收到错误。

This approach is great because all assets are handled by the build system and will get filenames with hashes in the production build. You’ll also get an error if the file is moved or deleted.

缺点是如果你有数百张图片就会变得很麻烦，因为你不能随意导入路径。

The downside is it can get cumbersome if you have hundreds of images because you can’t have arbitrary import paths.

1. 使用公共文件夹：

// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

一般不推荐这种方法，但它如果你有数百张图片并且逐个导入它们太麻烦了，那就太棒了。缺点是你必须考虑缓存破坏并自己注意移动或删除的文件。

This approach is generally not recommended, but it is great if you have hundreds of images and importing them one by one is too much hassle. The downside is that you have to think about cache busting and watch out for moved or deleted files yourself.

希望这会有所帮助！

这篇关于在react js中加载本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！