【Vue3】访问图片资源的不同形式

背景

最近在做一个前后端分离的项目,在访问图片资源的时候因为url格式的问题卡住了许久,有必要记录一下

向vue3项目的运行端口请求

如果资源写在后端端口,可以直接写字符串格式访问:

    getPosterUrl(posterName) {
      return "@/assets/img/movie_posts/"+posterName;
    },

请求的时候控制台就会这样显示:

其中localhost:8080是运行vue项目的时候跑起来的默认端口。

向本地请求资源

但是在实际的项目开发里面,对本地资源的请求多于对运行端口的资源请求。

因此我们可以这样写:

getPosterUrl(posterName) {
      return require(`@/assets/img/movie_posts/${posterName}`);
    },
  • 路径使用“`”(也就是键盘左上角esc下面的那个符号)括起来
  • 涉及参数的使用“${}”包裹住

其他注意事项

  1. 不管那种请求方式,都不要漏掉图片背后的,jpg后缀名
  2. 假如调用外部css文件访问图片,则不需要用require,也不能用@来代表src以请求视频文件,直接用相对路径请求即可——
background-image: url("../overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(3, 2, 2, 0.1)), url('../background.png');

### 实现 Vue3 中正确加载和显示图片的方法 在 Vue3 开发过程中,如果需要加载并显示图片资源,可以采用多种方式来解决问题。以下是针对不同场景下的解决方案: #### 1. 静态资源路径配置 当项目中的图片位于 `public` 文件夹下时,可以直接通过相对路径访问这些文件。这种方式适用于不需要经过 Webpack 打包的静态资源。 ```html <img src="/images/example.png" alt="Example"> ``` 需要注意的是,在这种情况下,图片路径应相对于 `public` 文件夹设置[^1]。 --- #### 2. 动态加载图片资源 对于动态加载的图片资源,推荐使用 ES6 的 `import` 语法提前引入图片路径。这种方法能够确保图片被正确打包到最终构建产物中。 ```javascript // 提前导入图片 import imgPath from &#39;@/assets/images/example.png&#39;; export default { data() { return { imagePath: imgPath, }; }, }; ``` 随后可以在模板中绑定该变量作为 `<img>` 标签的 `src` 属性值: ```html <img :src="imagePath" alt="Dynamic Image"> ``` 此方法利用了 Webpack 对于模块化资源的支持,从而避免了因路径解析而导致的 404 错误[^2]。 --- #### 3. 使用数组批量管理多张图片 如果需要一次性加载多个图片,则可以通过循环的方式定义一个包含所有图片路径的列表,并借助响应式数据结构(如 `reactive` 或者 `ref`)对其进行维护。 ```javascript import { reactive } from &#39;vue&#39;; import img1 from &#39;@/assets/img/index/index1.jpg&#39;; import img2 from &#39;@/assets/img/index/index2.jpg&#39;; import img3 from &#39;@/assets/img/index/index3.jpg&#39;; const imgs = reactive([img1, img2, img3]); ``` 接着可在组件内部遍历渲染这些图片: ```html <template> <div v-for="(item, index) in imgs" :key="index"> <img :src="item" :alt="&#39;Image &#39; + (index + 1)"> </div> </template> ``` 上述代码片段展示了如何高效地管理和展示一组本地存储的图片资源[^3]。 --- #### 4. 处理运行时路径差异 有时会发现开发环境与生产环境中图片的实际加载地址存在偏差。为了避免此类问题的发生,建议始终遵循统一的标准写法——即基于别名 (`@`) 来定位 assets 下的具体位置。这样无论是在哪个阶段执行部署操作,都能保持一致的行为表现。 例如: ```javascript import logo from &#39;@/assets/logo.png&#39;; // 正确的做法 ``` 而非硬编码绝对或者相对路径字符串形式传递给 HTML 元素属性之中。 --- ### 总结 综上所述,Vue3 中实现图片正常显示的关键在于合理运用现代前端框架所提供的特性以及配套工具链的能力。无论是简单的静态引用还是复杂的动态加载需求都可以找到对应的解决策略加以应对。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值