代码之家 › 专栏 › 技术社区 › JsWizard

使用Typescript从React中的assets文件夹导入图像

typescript reactjs

JsWizard · 技术社区 · 5 年前

直接图像导入正在工作,但对象类型不起作用。为什么会发生这种情况? 我使用的是“react”:“^16.12.0”,“typescript”:“~3.7.2”

// ./src/assets/babys/Babyimages.tsx

const BabyImages = [
  { img: '../assets/babys/1.png', age: 1, name: 'name1' },
  { img: '../assets/babys/2.png', age: 1, name: 'name2' },
  ...
];
export default BabyImages;


// ./src/component/Home.tsx
    ...
    import BabyImages from '../assets/babys/BabyImages';
    import SampleImage from '../assets/babys/1.png';   // this direct image importing is working
    ...

    const tileData = BabyImages.map(data => {
      return { img: data.img, age: data.age, name: data.name };
    });

    export default function TestFunction() {
     ...

    return (
    ...
      <img src={SampleImage} alt="" />     // <----- so,this is working!!
            {tileData.map(tile => (     //<------ but it's not working!
        <img src={tile.img} alt={tile.name} />
        <GridListTileBar
          title={tile.age}
          subtitle={<span>baby: {tile.name}</span>}
        />
    ...
    ))}
  );

0 回复 | 直到 5 年前

5ar 5 年前

示例1正在工作,因为您已经直接导入了它,webpack将知道如何打包它并正确引用 public/index.html 它在输出的构建中。

在下面的代码中,你基本上只是在做 src="../assets/babys/1.png" 这对他们来说毫无意义 public/index.html 除非有 assets 文件夹位于到它的相对路径上,开发服务器有权访问它。

处理此问题的最简单方法是:

// ./src/assets/babys/Babyimages.tsx
import BabyImage1 from '../assets/babys/1.png'; 
import BabyImage2 from '../assets/babys/2.png'; 

const BabyImages = [
  { img: BabyImage1, age: 1, name: 'name1' },
  { img: BabyImage2, age: 1, name: 'name2' },
  ...
];
export default BabyImages;

推荐文章