Question

所以我有一个用react.js创建的Visual Studio项目。

我正在尝试动态链接到图像，但是失败了。这是我正在尝试的代码：

在顶端为路径的第一部分设置一个变量：

this.LogoPath = '../images/'

然后我通过api调用动态获取图像的名称。

this.setState({ imageNamePath: this.state.location.imageName })

然后将它们隐瞒：

{`${this.LogoPath}${this.state.location.imageName}`}

在控制台中，我得到了：

img src='../images/the-images-name-here.png'

因此，它似乎正在工作，但是没有。我没有错误，并且图像损坏。我最好的猜测是反应将图像更改为：

image-name-here.6a131799.png

肯定有人遇到过这个问题，但是我的Google搜索几乎没有帮助。

那我该如何显示图像？

Answer 1

Webpack是一个智能工具。优点之一是从捆绑软件中消除了垃圾代码/文件。

这意味着，如果未使用import myFile from '../myPath/myFile.jpg';或require（'../ myPath / myFile.jpg'）;导入文件，则该文件不会成为最终捆绑包的一部分。

就您而言，您不是要导入文件。您正在创建一个字符串变量，但这对webpack毫无意义。

在您的情况下，可能有不同的选择：

选项1：：预导入所有图像并将其映射到对象中：

import React, {Component} from  'react';
import image1 from '../assets/image1.png';
import image2 from '../assets/image2.png';
import image3 from '../assets/image3.png';

const imageTypes = {
  image1,
  image2,
  image3,
}

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageType: 'image1'
    }
  }

  render() {
    return (
      <img src={imageTypes[this.state.imageType]} />
    )
  }
}

选项2：不建议-使用require动态导入文件（可能需要Webpack配置，以便在生产包中包含所有可能的必需映像）：

class MyComponent {
  constructor(props) {
    super(props);
    this.state = {
      image: 'file1.png'
    }
  }

  render() {
    return (
      <img src={require(`./assets/${this.state.image}`)} />
    )
  }
}

选项3：从API发送图片Blob（在base64中）。

我建议您根据自己的要求使用选项1 或选项3 ，例如：多久更改/添加/删除图像一次。从ReactJS捆绑包动态导入文件是不正常的，并且可能会由于来自外部源的数据而在项目中最终出现不存在的图像。

对于选项2 ，您也可能在配置Webpack时遇到一些问题，以便将所有可能需要渲染的图像都包含在捆绑包中，即使它们没有被导入（硬编码） JS文件中的某个位置。请记住，生产中的React Application最终是静态文件的集合。您需要按以下方式对待它们。

Visual Studio反应图像路径无法达到

1 个答案: