Vue.js通过Node.js上传图片并获得正确的HTTP地址后不能显示？

Question

问题：
Vuejs前端通过nodejs上传图片=》
nodejs返回一个http://localhost:8080/server/uploads/temp/1.jpg的路径到前端=》
前端报404获取不到此图片

---

说明：
1.Vuejs端口8080；nodejs端口8088，已设置跨域，api请求正常（因为可以正常上传图片到指定文件夹）

2.用最新版脚手架创建新项目，把旧项目的src文件夹迁移到新项目，不报404，但是显示空白

3.http://localhost:8080/server/uploads/temp/1.jpg，在浏览器直接输入此地址也无法获取图片

4.尝试过把nodejs的server迁移到可正常显示图片的项目上，一切正常。

Answer 1

已经找到解决方案！！！！！

---

先说谁的锅：
webpack的锅

---

解决方法：
webpack.dev.conf.js文件下的contentBase，被设置为了false，注释掉就行了

---

原因：
contentBase在vue-cli创建的时候就被设为了false（不懂为什么要这样做）
官方注释说：与copy-webpack-plugin模块有关，具体原因待研究

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },

    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

---

https://blog.csdn.net/liangkl...
https://segmentfault.com/q/10...
这两个链接都有说到这个contentBase的作用

---

可以解决的问题：

api通过代理后能正常访问

但是不能通过http://localhost:8080/...取到任何资源

Answer 2

http://localhost:8080/server/uploads/temp/1.jpg
服务端要写路由响应静态资源的，光有东西匹配不上路由路径也不会有返回

Answer 3

上传到node服务，node服务端口是8088，那为什么要通过8080端口获取图片，图片应该在8088端口下啊。