引用资产文件夹中的图像答案

【问题标题】：Referencing image in assets folder引用资产文件夹中的图像
【发布时间】：2021-09-09 04:12:22
【问题描述】：

我的资产文件夹中有 sampleposition.png，我的组件文件夹中有一个名为 myPage.js 的页面。如何从 myPage.js 引用我的资产文件夹中的 sampleposition.png。我试过src="../assets/sampleposition.png" /，但这似乎不起作用。

【问题讨论】：

实现你想要的东西的惯用方法是使用捆绑器（如 webpack）和“编译器”（如 babeljs），而不是使用 import 语句，这样你就可以使用图像作为一个组件。 stackoverflow.com/questions/66410782/…
stackoverflow.com/questions/37644265/…
谢谢大家。真的很有帮助。

标签： javascript reactjs

【解决方案1】：

如果您使用的是Create React App，则该过程相当简单直接。

你是import 还是在做类似<img src="../whatever/> 的事情？您需要成为importing，以便构建知道如何在运行时访问它。见Adding Images, Fonts, and Files

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;

如果不是，您需要静态提供内容并引用静态内容地址，或者使用构建/捆绑工具将内容放入提前知道的位置，这就是 create-react - 应用工具为您设置。

【讨论】：

效果很好，谢谢！我从来不知道我需要导入它。

【解决方案2】：

导入您的图像并在代码中使用它。这应该根据您的要求进行。

import React from 'react';
import myImage from '../assets/sampleposition.png'; 



function YourFunction() {
  
  return 
        <img src={myImage} alt="myImage" />;
}

export default YourFunction;

【讨论】：