Question

我尝试导入图像，但没有显示图像，而是显示图像的路径。

我正在创建且仍在向其添加更多数据的数组是：

<div id="elm"></div>

我是如何渲染它的：

import importedImage from './assets/path.png';
export const membersData = {
    All: [
        { 
            id: 1,
            picture: importedImage,
            name: 'Demo name', 
            location: 'Demo location', 
            role: 'Consultant ', 
            contact: 'T: number \nE: mail' 
        },
    ],
}

结果：{posts.length === 0 ? ( <p>No posts...</p> ) : ( posts.map((post) => ( <div key={post.id}> {post.picture} </div> )))}

注意：路径不是我实际使用的，仅用于演示目的

Answer 1

如果你的 bundler 配置得很好，通过导入你应该得到一个 base64 图像 url。所以你可以把它传递给 img 标签：

<img src={post.picture} alt=""/>

Answer 2

将导入的图像 url 传递给图像标记的 src 属性。

<img src={post.picture} alt="Could not load image" />

导入的图像显示图像路径而不是图像 - React.js

2 个答案: