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

Question

当我将道具传递给 img 的属性 src 时，我有一个关于 link 没有加载我的图像的问题。我试过将 require() 包裹在我的 link 周围，但它没有用。

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

因此，有没有办法使用 src 属性中的 props 加载图像？

我正在使用 NODE_PATH=src/

感谢您的帮助！

export const productLib = [{
    ID: "001",
    name:"product name",
    src: "lib/productLib/img/product_name",
    color: "",
    ...
    }, {...}]

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>
        )
    }
}

Answer 1

我认为问题与您将 url 发送到组件的方式有关。

"lib/productLib/img/product_name" 不是 url，也不是相对的 url。

您可以使用导入来获取图像。

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;

如果您使用的是 react-create 应用程序

他们为您解决问题： https://create-react-app.dev/docs/adding-images-fonts-and-files/

Answer 2

根据 Xuscrus 的推荐，我使用 public 路径链接我的图像。为了使此解决方案起作用，我必须删除我的绝对路径。

我将我所有的图像移动到我的 create-react-app 的 public 文件夹中名为 "img" 的文件夹中。

根据我最初陈述中使用的示例，这是我找到的最简单的解决方案：

import React from 'react';

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

我的解决方案的主要参考是这个post（正确答案中的URL方法）：

Answer 3

我遇到了一个类似的问题，事实上我当时正在寻找解决方案，但我自己想出来了我将图像存储在一个单独的文件夹中，我将它们导入数据文件，然后将其传递给我需要它的组件，但图像没有显示。

我所做的只是

//img is the variable I'm getting the image path at
console.log(img)

返回

Module {default: "/static/media/svg-1.af890272.svg", __esModule: true, 
Symbol(Symbol.toStringTag): "Module"}
default: "/static/media/svg-1.af890272.svg"
Symbol(Symbol.toStringTag): "Module"
__esModule: true
[[Prototype]]: Object

在模块对象中获取它后，我看到了默认值，所以就这样做

img = img.default

现在你可以在 src 中传递它

从 'react' 导入 React；

<img src={img} width="50" />

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

Image not loading when passing a prop to <img src="this.prop." /> in React

javascript

image

src

reactjs