Question

我开始使用反应，我对导入图片感到有些困惑。

这是我的代码，它应该呈现徽标：

import React from 'react';
import {Link} from 'react-router-dom';
import {Data} from '../Data';
import logo from '../../images/logo.jpg';

export default() => {
    return (
        <nav className="navbar navbar-default">

            <div className="container-fluid">
                <div className="navbar-header">
                    <Link to="/" className="navbar-brand"><img src="{logo}" alt="logo" /></Link>
                </div>
                <div id="navbar" className="navbar-collapse collapse">
                    <ul className="nav navbar-nav navbar-right">
                        Toggle
                    </ul>
                </div>
            </div>
        </nav>
    );
}

但我的徽标没有呈现。

我尝试console.log(logo)并输出client/images/logo.jpg
尝试将{logo}替换为实际字符串＆＃34; client/images/logo.jpg＆＃34;这样就可以正确呈现徽标了

所以我的问题是，变量logo由于某种原因而无法转换为字符串，为什么会这样？

Answer 1

尝试

<img src={logo} ... />

当你按照自己的方式行事时，你只需将字符串"{logo}"作为道具

传递

Answer 2

所以我的问题是，变量徽标不是出于某种原因转换为字符串，为什么会这样？

因为您使用了错误的语法。当您使用字符串文字作为prop值（即prop="value"）时，将使用字符串的值而不进行任何插值。因此，该组件实际上是{logo}作为源。

要传递变量（或任何表达式）的值，您必须使用prop={...}形式（其中...是您的表达式）。即在您的示例中：src={logo}。

导入的变量未翻译

2 个答案: