反映渲染图像不起作用

Question

不确定这是否是在React中执行此操作的方式/最佳方式。如果有更好的方式或如何使这项工作，请有人评论

我有一个简单的图像组件：

import React from 'react';

const component = ({image}) => (
  <img src={image} />
)

export default component;

当我使用它时，我将它传递给它：

<Image image={item.product.image}/>

并且它生活在一个像这样的对象中：

{
    name: 'Rucksack',
    price: '15.00',
    salePrice: '7.00',
    id: 1,
    image: '/data/rucksack.jpg'
  },

但是当我运行它时，我得到了一点绿色图像错误，控制台说： http://localhost:8080/data/rucksack.jpg 404 (Not Found)

任何我不太正确的事情？

Answer 1

图片网址似乎是一个问题。服务器返回404共振，因为它无法找到图像。检查图像URL是否正常工作。

您应该可以使用http://localhost:8080/data/rucksack.jpg访问该图像。使用curl命令或使用浏览器进行检查。

Answer 2

您需要使用require使其与webpack一起使用。

您只需要更改图像组件，现在路径需要是相对的：

import React from 'react';

const component = ({image}) => (
  <img src={require(image)} />
)

export default component;

您还需要使路径相对（可能需要调整它）：

{
    name: 'Rucksack',
    price: '15.00',
    salePrice: '7.00',
    id: 1,
    image: '../data/rucksack.jpg'
  },