V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
humbass
V2EX  ›  Vue.js

求教一个 vue3 图片路径的问题

  •  
  •   humbass · 2023-09-29 14:57:09 +08:00 · 1596 次点击
    这是一个创建于 419 天前的主题,其中的信息可能已经有所发展或是发生改变。

    图片文件托管在 cdn 上,例如某个文件的网址是 https://static.aaa.com/pic/123.png

    实际在数据库中存的地址为 pic/123.png ,有没有办法在 img 标签中直接使用 pic/123.png ,无论是开发环境还是打包环境可以自动根据配置加上 https://static.aaa.com/

    10 条回复    2023-11-06 09:30:06 +08:00
    wdssmq
        1
    wdssmq  
       2023-09-29 15:05:35 +08:00
    环境变量和模式 | Vite 官方中文文档
    https://cn.vitejs.dev/guide/env-and-mode.html#env-variables-and-modes
    ivslyyy
        2
    ivslyyy  
       2023-09-29 17:27:27 +08:00
    这个路径放环境变量里,然后代码里写一个函数,用来拼接路径。图片路径从接口拿到的时候,用这个函数套一下。
    cctvabu
        3
    cctvabu  
       2023-09-29 17:35:16 +08:00
    设置环境变量 然后封装一个方法就行了
    wunonglin
        4
    wunonglin  
       2023-09-29 19:49:53 +08:00
    https://angular.io/guide/image-directive

    这个问题是工程化的问题。你应该写个组件或者指令去做这件事情,而不是直接修改 img 的 src ,可以参考 angular 怎么做的
    humbass
        5
    humbass  
    OP
       2023-09-30 21:01:55 +08:00
    @cctvabu 目前就是用个方法,感觉所有地方都要套一下,很土的样子 :)
    vacker
        6
    vacker  
       2023-09-30 22:21:07 +08:00 via iPhone
    建议后端返回数据的时候加
    cctvabu
        7
    cctvabu  
       2023-10-03 13:17:14 +08:00
    @humbass 那就直接让后端拼好就行,这种东西他们很好处理的。前端不用那么纠结。
    humbass
        8
    humbass  
    OP
       2023-10-03 13:49:46 +08:00
    @cctvabu 有些情况是前端通过 token 上传文件到 oss, 返回的路径是不带的 url 前缀的,vite 应该有一个配置,可以直接支持某种字符串开头的,直接加上 cdn 地址。
    867380699
        9
    867380699  
       2023-10-06 09:41:48 +08:00 via Android
    用 Service Worker 可以实现
    fqy12300
        10
    fqy12300  
       2023-11-06 09:30:06 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4803 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:56 · PVG 11:56 · LAX 19:56 · JFK 22:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.