图片的require问题

问题

js 复制代码
<template>
  <!--第一种方式-->
  <img :src="require(`@/assets/${imageName}`)" style="width:100px;" />
  <!--第二种方式-->
  <img :src="require(imageUrl)" style="width:100px;" />
</template>

<script>
export default {
  data() {
    return {
      imageName: 'gfbh.jpg', // 这个图片名是动态的
      imageUrl: "@/assets/gfbh.jpg"
    };
  }
}
</script>

这两者有什么区别,为什么第一种能显示,第二种显示不了

两者的区别主要在于 Vue 和 Webpack 如何处理路径的解析,特别是动态路径和静态路径。

  1. :src="require(@/assets/${imageName})"
    这种写法使用了模板字符串 `,动态生成图片路径。Webpack 会根据这个路径去解析对应的图片资源。在 Vue 中,require 语句会在编译时被 Webpack 解析为正确的资源路径。

工作原理:

require 会告诉 Webpack 在构建时解析该路径,并返回一个有效的 URL。

@/assets/${imageName} 是动态生成的路径,Webpack 会在构建时动态解析它并加载相应的图片。

为什么能显示:

require 是静态分析工具(Webpack)的一部分,在构建时解析动态路径,因此它能够正确处理该路径并生成图片。

  1. :src="require(imageUrl)"

这种写法的问题在于,imageUrl 是一个变量,它的值是 @/assets/gfbh.jpg。当你直接将变量传给 require,Webpack 并不会像第一个例子一样解析它,原因是 Webpack 只能处理静态字符串路径,在编译时无法处理动态变量。

为什么显示不了:

require 不能处理动态的变量路径,因为 Webpack 需要在编译时就知道资源的路径。对于像 imageUrl 这样的动态变量,Webpack 无法分析其中的路径,因此它无法将这个路径转换成有效的 URL。

解决办法:

使用动态路径时: 最好的方式还是通过 require 包装动态路径,或者将路径直接拼接成静态路径,然后传递给 require。

比如:

js

这种方法,Webpack 会在编译时将 ${imageName} 替换为对应的图片路径,并处理。

另一种方案: 如果确实需要通过动态变量传递路径,可以将资源存放在 public 文件夹中,而不是 src/assets 中,因为 public 文件夹中的资源不需要 Webpack 的处理,可以直接通过相对路径引用。

总结:

:src="require(@/assets/${imageName})" 通过动态路径被 Webpack 处理和解析。

:src="require(imageUrl)" 无法处理动态变量路径,需要静态路径。

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript