[解决方案] VUE.js 在脚本中加载包含参数的本地图片

最新推荐文章于 2024-12-01 08:32:30 发布

ark0015

最新推荐文章于 2024-12-01 08:32:30 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE.js 解决方案

本文链接：https://blog.youkuaiyun.com/ark0015/article/details/97622381

VUE.js 同时被 2 个专栏收录

3 篇文章

订阅专栏

解决方案

1 篇文章

订阅专栏

本文介绍了如何在Vue.js中解决在脚本中加载包含参数的本地图片的问题。由于require.js的限制，Vue.js原生不支持此类加载，但通过将函数放在computed属性下，并设置根目录，可以动态计算并找到所需图片。详细步骤包括：1) 使用computed创建动态计算的函数；2) 定义根目录以查找图片；3) 在模板中调用该函数并将结果赋值给图片路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

忙里偷闲，希望能帮到有需要的人

基础知识：
1，VUE.js 在脚本中加载本地图片路径的时候需要用 require，但在html标签中设定则不需要；
2，VUE.js 原则上不支持加载包含参数的本地图片路径，即使使用require仍然会报错，这是因为require.js的特性问题；
3，很多情况下，我们需要从数据库取数据然后编译，其中也包括图片。一般情况下，除了网络图片的URL，二进制形式的图片外，还可能包含本地图片路径。

具体操作：

<template>
  <img :src="imgA"/>
</template>

<script>
export default {
  computed: {
    你的函数名 (可选参数) {
      return require('某个项目内的本地文件夹（aka根目录）' + 参数)
    }
  },
  methods: {
    你的函数名2 (可选参数2) {
      this.imgA = 你的函数名 (可选参数)
    }
  }
}
</script>

几个要点：
1，函数必须得存放在computed下，这是一个动态计算的区块，不同于methods，require内包含动态参数不会报错；
2，必须提供一个根目录，之后的部分随你怎么玩都行，根目录是必须的，在运算时实质上会获取根目录下的所有文件，然后查找你需要的；
3，在调用时将this.你的函数名 (可选参数) 赋值给你绑定的图片路径参数（本例中的imgA）。

如果有什么描述不清楚的地方欢迎留言。