小编Kin*_*ton的帖子

将道具传递给 <img src="this.prop" 时,图像未加载。React 中的 />

当我将 prop 传递给 img 的属性 src 时,我遇到了链接未加载图像的问题。我尝试过将 require() 包裹在我的链接周围,但它不起作用。

我有一个巨大的产品库,使用图像加载器手动导入图像是不可行的。

因此,有没有办法使用 src 属性内的 props 来加载图像?

我正在使用 NODE_PATH=src/

谢谢您的帮助!

export const productLib = [{
    ID: "001",
    name:"product name",
    src: "lib/productLib/img/product_name",
    color: "",
    ...
    }, {...}]
Run Code Online (Sandbox Code Playgroud)
import React from 'react';

export class Products extends React.Component {
    render() {
        return(
            <div className="products">
                <img src={this.props.product.src} width="50" />
                <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6>
            </div>
        )
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript image src reactjs

2
推荐指数
1
解决办法
1万
查看次数

标签 统计

image ×1

javascript ×1

reactjs ×1

src ×1