如何在 vue 项目中,正确引用项目文件夹外的图片

2023-12-04 22:33:13 +08:00
 sucaiking

我并不想把一些图片放在/src 里,于是我试着创建了一个和项目 vue_code 同级的文件夹 photoData ,把图片放在里面。现在我打开网页时好像没法正确获取图片。

经过查找资料,我现在使用的写法是:

<img v-for="photo in photos" :key="photo.photo_id" :src="require('D:/vueproject/code' + photo.photo_path)" />

但这种写法似乎会导致运行时需要 build 的 modules 数无限增大。请问下我正确的写法应当是什么。

1138 次点击
所在节点    Vue.js
6 条回复
lisongeee
2023-12-04 23:31:39 +08:00
提前将 D:/vueproject/code 的 图片文件 使用 require.context 按需加载

如果是 vite 可以使用 import.meta.glob
cuttlefish
2023-12-05 13:17:05 +08:00
不大明白,这样子引入目的是为了啥。
coolcoffee
2023-12-05 14:18:34 +08:00
你这种依赖系统路径的项目,换个电脑要怎么跑?

你为啥不把图片文件都放在 public 目录里面,然后用 “/” 路径直接访问,或者是直接丢 oss+cdn 直接全外部依赖。
flyqie
2023-12-05 14:40:08 +08:00
无论如何都不要在项目源码里使用绝对路径。
nashaofu
2023-12-05 18:27:47 +08:00
require.context 好像可以,很久没用了
sucaiking
2023-12-05 21:12:45 +08:00
感谢各位坛友。几番试错后我发现自己一开始的想法及其离谱,用../去找父目录也很蠢。作为不需要太过讲究的课程作业,我最后的解决方案是用 http-server 起了个本地服务器,配置好端口之后用作图片源。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/997620

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX