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

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'));