使用vue和playframework访问动态图像

Question

我使用vue和Play！我的项目框架。

正面：Vue.js 2.6.12后端：播放！Scala框架(2.12.8(

我使用以下代码片段将图像上传到我的服务器(这是从这里复制的：https://www.playframework.com/documentation/2.8.x/ScalaFileUpload

def uploadImage = Action.async{   implicit request =>

request.body.asMultipartFormData.map{ pic =>
val file = pic.files
val userIdTemp = pic.asFormUrlEncoded("userId")
val userId = userIdTemp.head.toInt
val itemIdTemp = pic.asFormUrlEncoded("itemId")
val itemId = itemIdTemp.head.toInt
val contentType = file.head.contentType
val filename    = Paths.get(file.head.filename).getFileName.toString().toLowerCase()
val fileSize    = file.head.fileSize
print("content Type: "+contentType)
print("filename: "+filename)
print("filesize: "+fileSize)

file.head.ref.moveFileTo(Paths.get(s"...\vui\src\assets\"+filename).toFile, replace = true)


print("***********************uploadImage -3")
service.saveImage(userId,itemId, filename.toString()) map{ foundItems =>
Ok(Json.toJson(foundItems))
}
}.getOrElse(null) // change me
}

我将图像上传到服务器，并将与项目相关的url保存在数据库中。这很好用。我用以下代码片段在我的正面显示图像：

<b-carousel-slide  :img-src="require('../../assets/'+img.imgUrl)" >
</b-carousel-slide>

当我尝试上传一个我之前上传的图像时，它工作正常，但如果我第一次尝试上传图像，我会得到以下异常：

Error: Cannot find module './001.jpg'
webpackContextResolve .*$:70
webpackContext .*$:65
render FoodMenuItem.vue:1302
renderList VueJS
render FoodMenuItem.vue:1274
VueJS 14
createNewImages FoodMenuItem.vue:809
uploadImage FoodMenuItem.vue:802
promise callback*p$1.then vue-resource.esm.js:230
uploadImage FoodMenuItem.vue:799
onSelect FoodMenuItem.vue:720
VueJS 33
updateTarget transporter.js:145
updated transporter.js:98
VueJS 13
click FoodMenuItem.vue:1256
VueJS 3
vue.runtime.esm.js:1897
VueJS 17
createNewImages FoodMenuItem.vue:809
uploadImage FoodMenuItem.vue:802
then vue-resource.esm.js:230
uploadImage FoodMenuItem.vue:799
onSelect FoodMenuItem.vue:720
VueJS 33
updateTarget transporter.js:145
updated transporter.js:98
VueJS 13
click FoodMenuItem.vue:1256
VueJS 3

图像被上传，url被保存在数据库中，但我的前端崩溃了。当i〃；完整的"；刷新我的浏览器，再试一次，一切都很好。我的猜测是，我无法访问需要哪些未加载的图像？

有没有一种方法可以在不刷新浏览器的情况下显示这些图像？这是在web应用程序中处理图像的正常方式吗？任何帮助都会有所帮助！

如果你需要更多的信息来帮助，只需问我：(

谢谢！

Answer 1

我尝试了很多事情，并遵循了以下步骤：

https://blog.lichter.io/posts/dynamic-images-vue-nuxt/

正如我上面告诉你的，我现在正在上传我的图像到UI中的资产文件夹。如果我处于开发模式，我可以上传新的图像并用以下代码显示：

<img :src="require(`../../assets/${img.imgUrl}`)" >

现在这是有效的。但当我用改变生产模式时

1. npm运行构建
2. sbt编译阶段
3. sbt启动

前端应用程序将是public/ui/文件夹中的静态应用程序

然后我不知道新图像的正确相对路径。。。

vue.config.js:

const path = require("path");
const webpack = require('webpack')
module.exports = {
outputDir: path.resolve(__dirname, "../public/ui"),
assetsDir: process.env.NODE_ENV === 'production' ? 'static':'',
devServer: {
public: 'localhost:8080',
headers: {
'Access-Control-Allow-Origin': '*',
}
},
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.conf': {
'RECAPTCHA_SITEKEY': JSON.stringify(process.env.RECAPTCHA_SITEKEY)
}
})
]
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transformAssetUrls = {
img: 'src',
image: 'xlink:href',
'b-avatar': 'src',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
return options
})

}

}

我在哪个文件夹上传图像？如何在生产模式下获取新上传的图像？