我在反应中的图像不会加载到页面上。如何加载本地图像文件？

Question

正在尝试从我的资产文件夹中添加图像，但似乎无法返回那么远？

<img class='fade-in' src={'.../assets/images/logos/SWSLogoNOBG.png'} />

我不能用这些点返回那么远吗？我可以使用两个而且它有效，但是三个太多了吗？

我也试过了

import SWSLogo from '.../assets/images/logos/SWSLogoNOBG.png';

然后完成

<img class='fade-in' src={SWSLogo}/>

但这也行不通吗？

我觉得超级笨，需要一些帮助，因为这个小问题花了我两天的时间，但我的进展为零。

编辑：

我成功了，但只是将我的图像文件移动到与 Home.js 文件相同的文件夹中。

反应不能到达直接目录之外的文件吗？为什么这么蠢？

Answer 1

如果您需要向上移动多个嵌套文件夹，那么对于每个文件夹您都需要另一个“../”

例如，如果您有

 1. src
    2. folder
       3. folder
          index.js
    app.js

你需要做'../../app.js'

如果您使用的是硬编码路径，请使用引号：

    <img
      alt="dolphin"
      src="../../images/dolphin.jpg"
      ariaLabel="dolphin"

    />

如果你要退出说 JSON 你会做这样的事情：

const animals = {
  dolphin: {
    image: '../../images/dolphin.jpg',
    facts: ['Dolphins have been shown to give distinct names to each other!', 'Dolphins are known to display their own culture!', 'Dolphins have two stomachs!']
  },
  lobster: {
    image: '../../images/lobster.jpg',
    facts: ['Lobsters taste with their legs!', 'Lobsters chew with their stomachs!', 'Lobsters can live as long as 100 years.']
  },
  starfish: {
    image: '../../images/starfish.jpg',
    facts: ['Starfish can have up to 40 arms!', 'Starfish have no brain and no blood!', 'Starfish can regenerate their own arms!']
  }
};
const images = [];
for (const animal in animals) {
  images.push (
    <img
      alt={animal}
      src={animals[animal].image}
      ariaLabel={animal}
    />
  )
};
const allImages = 
(
  <div className='animals'>
  {images}
  </div>
)
ReactDOM.render(allImages , document.getElementById('root'));

我在反应中的图像不会加载到页面上。如何加载本地图像文件？

My images in react will not load onto the page. How do I load a local image file?

import

image

reactjs