尝试在 JSX 中使用 var 作为 img src

Question

我正在做一个 React 项目，我遇到一种情况，我需要将 img 标签的 src 属性作为变量。代码的相关部分如下所示：

import React, { useState, useEffect } from 'react';

// topics is already defined and is a js object

const allTopics = topics.map(topic => {
        url = topic['image_url'];
        return (
            <Grid item key={ topic['topic_id'] } item xs={4}>
                <div class='img-wrapper'>
                    <img id='topicpreview' src={url} alt="loading" />
                    <h1>{topic['topic_name']}</h1>
                </div>
            </Grid>
        );
    });

return (
<div style={{ padding: '0', margin: '0', border: '1px solid black', width: '100%', height: '60%', overflow: 'hidden', display: 'inline-block' }} text-align='center'>
                <Grid container>
                    {allTopics}
                </Grid>
            </div>
    );

图像路径存在并指向一个有效文件，我已经在控制台记录了 url 以进行确保它是相同的路径。但是，它没有找到图像并最终打印“正在加载”替代文本。我不确定出了什么问题，如有任何帮助，我们将不胜感激！

Answer 1

我想我明白你的问题了。

我们不能在 img 中使用本地路径，因为它将引用您的本地目录（而不是您网站的域）

要修复它，如果您使用的是 Webpack，则需要像下面的代码片段一样调用

const image = require(url); //or const image = require(url).default;

<img src={image} />

您也可以尝试使用此 URL localhost:3000/static/images/piano2.jpeg（您的端口可能不同）找到您的本地图像

尝试在 JSX 中使用 var 作为 img src

Trying to use var as img src in JSX

html

javascript

css

jsx

reactjs