visual studio反应图片路径无法到达

Question

所以我用 react.js 创建了一个 visual studio 项目。

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

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

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'

所以它似乎有效，但实际上没有。我没有收到任何错误，而且图像损坏了。我最好的猜测是反应正在将图像更改为类似的东西：

图片名称在这里。6a131799.png

之前肯定有人运行遇到过这个问题，但我的 google 搜索几乎没有帮助。

那么我该如何显示图片呢？

Answer 1

Webpack 是一个智能工具。它的优势之一是从捆绑包中删除垃圾 code/files。

这意味着如果文件不是使用 import myFile from '../myPath/myFile.jpg'; 或 require('../myPath/myFile.jpg');` 导入的，它将不会成为最终包的一部分。

在您的情况下，您没有导入文件。您正在创建一个字符串变量，这对 webpack 没有任何意义。

有不同的选项适用于您的情况：

选项 1： Pre-import 所有图像并将它们映射到一个对象中：

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，根据您的要求，例如：图像的频率是 changed/added/removed。从 ReactJS 包动态导入文件是不正常的，你可能最终在你的项目中有一个 non-existing 图像请求来自外部源的数据。

对于选项 2 你也可能在配置 webpack 时遇到一些问题，以便将你可能需要渲染的所有图像包含在 bundle 中，即使它们是未在 JS 文件中的某处导入（硬编码）。请记住，生产中的 React 应用程序最终是静态文件的集合。您需要按如下方式对待它们。

visual studio反应图片路径无法到达

visual studio react image path cannot reach

visual-studio

reactjs

visual-studio-2017