Question

我只是试图创建一个包含.jpg的组件并将其传递给App.js（我使用了“ create-react-app”）。不幸的是，我的浏览器告诉我一个编译错误：

编译失败
./src/bla/components/Pics.js
找不到模块：无法解析'C：\ lernordner \ testapp \ test \ src \ bla \ components'中的'./bla/tb1.jpg'
此错误在构建期间发生，无法消除。 '''

有人可以告诉我我做错了什么吗？目录路径可以。谢谢！

App.js：

import React, { Component } from 'react';
import Pics from './bla/components/Pics.js';

class App extends Component {
  render() {
    return (
      <div className="App">
         <Pics />
      </div>
    );
  }
}

export default App;

Pics.js：

import React from 'react';
import Test from './bla/test.jpg'; 

function Pics() {
  return <img src={Test} alt="Logo" />;
}

export default Pics;

Answer 1

代码中的

import语句将导入整个图像文件。现在，如果这是正确的，那么将整个文件内容分配给src属性图像就不会显示图像。您必须在src属性中传递图像路径。像这样：

function Pics() {
    return <img src={'assets/test.jpg'} alt="Logo" />;
}

Answer 2

您尝试过这样吗？如果仍然无法使用，则是目录

的问题

const Pics = () => {
  return <img src={Test} alt="Logo" />;
}

通过图像传递组件的问题

2 个答案: