NUXT3 图片加载11111111111111111

Question

NUXT3 项目怎么显示动态图片？

后台接口返回一个列表

[{
id: "w93na93n1233urzgufzm27g"
listLogo: "1.jpg"}，
{
id: "w2333k2k3urzgufzm27g"
listLogo: "2.jpg"}]

之前VUE2项目是这样用

<img :src="`/files/${item.listLogo}`" alt="" />

NUXT3怎么写？因为这个项目有很多客户，每个客户的都有独立的服务器，但是图片资源都是在根目录的files/文件夹下
NUXT3怎么配置静态资源？
PS：NUXT3我的ssr:false，没有用ssr。

Answer 1

参考GPT

在 Nuxt 3 项目中显示动态图片，可以通过以下步骤实现：

1. 安装依赖：在 Nuxt 3 项目中，安装 vue-router 和 @nuxtjs/proxy 依赖，以便正确处理静态资源请求。

   npm  install  vue-router  @nuxtjs/proxy
   

2. 配置路由：在 nuxt.config.js 文件中，配置路由以处理动态图片。

export  default  {
   buildModules:  [
     '@nuxtjs/proxy'
   ],
   proxy:  {
     '/api/images':  {
        target:  'http://localhost:3000',  //  图片服务器的地址
       changeOrigin:  true,
       pathRewrite:  {
         '^/api/images':  ''
       }
     }
   }
}

在这个例子中，我们创建了一个 /api/images 的代理，将请求转发到 http://localhost:3000（图片服务器的地址）。

1. 在组件中使用图片：在 Nuxt 3 组件中，使用 <img> 标签加载动态图片。
   ```

```
在这个例子中，我们使用 <img> 标签加载动态图片。通过在 setup 函数中获取图片 URL，并将其返回给模板，实现动态加载图片。

完成以上步骤后，Nuxt 3 项目应该能够正确显示动态图片。请注意，你需要确保图片服务器已正确配置并运行。