React中如何动态的引入服务端传过来的文件url？

#1

服务器有个接口A，接受一个参数pid，根据这个pid，返回一个图片的url；

客户端有个ajax请求，发送一个pid给A接口；

请问，现在如何将A接口返回的url，import 或者require到React项目里并展示？？

#2

axios请求那个接口不就好了吗，import 或者require不知道怎么写，

#3

hello;
ajax 这一步不是问题，已经拿到了url；
关键点是如何把这个url动态的引入到项目里；

#4

你说的，应该是异步的问题，你用axios请求成功后，在then里边setstate把url值传给一个state值不就可以了.

#5

no no，可能我之前的描述不太清楚。
不是ajax的问题，也不需要用到axios；
我就想请教的是，怎么在react项目里，动态引入一个图片，这个图片的地址是后端传过来的。:grinning:

#6

import或者require的方法我也不知道怎么写，这种情况，我会用ajax然后在setstate

#7

:grinning:好吧，刚看到一篇文章，说解决了require 引入变量的问题，贴出来：http://www.cnblogs.com/Leo_wl/p/4862714.html

#8 

export default class ImageInfo extends Component{
  componentDidMount(){
    const self = this;
    fetch(api).then((res)=>{
      const {imageUrl} = res;
      self.setState({imageUrl:imageUrl});
    })     
  }
  render(){
    const {imageUrl} = this.state;
    return (
      <div>
         <img url={imageUrl} />
      </div>
    );
  }
}

通过接口获取到图片url地址。
将获取到的 url 存放 到 state里面。
render的时候，用state里存放的变量。
差不多样吧，看看能用 不。

#9

hello：
实际情况比这个还要复杂和糟糕，我请求的接口给我返回的其实是一个url地址，这个地址指向的是一个PDF文件，我则用到了PDFobject插件来渲染这个pdf文件到页面上，这个插件有个方法，PDFObject.embed(fileUrl,DOM, config)，其中第一个参数就是需要渲染的文件的地址，如果在页面里用import File from file 引入本地测试文件，则可以通过这个插件播放，如果通过ajax请求后端文件地址，则不知道如何引入这个文件。:joy:

#10

获取到url再PDFObject.embed不就行了…

#11

已解决，谢谢:grinning: