在Vue中动态引入图片为什么要用require-Toy模板网

这篇具有很好参考价值的文章主要介绍了在Vue中动态引入图片为什么要用require。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

动态的添加src最终会被打包成：
在Vue中动态引入图片为什么要用require,前端学习总结,vue.js,前端,javascript

动态的添加图片最会会被编译成一个静态的字符串，然后再浏览器运行中会去项目中查找这个资源，

默认情况下src目录的所有文件都会打包一个新的文件名，然后编译后静态引入的地址就是打包后的静态地址。所以就可以正确的应用到这些资源了
在Vue中动态引入图片为什么要用require,前端学习总结,vue.js,前端,javascript

当我们使用require引入一张图片的时候，webpack会将这个图片当成一个模块，并根据配置文件的配置然后进行打包，最终返回一个大包的地址
在Vue中动态引入图片为什么要用require,前端学习总结,vue.js,前端,javascript

动态引入一个图片的时候，它其实是一个变量，webpack会根据v-bind的一个命令去解析SRC后面的值，并不会通过require引入资源的对象

js的相对路径和绝对路径的区别写法就是前面有没有/

new URL(url)
new URL(url, base)

url：一个表示绝对或 相对 URL 的 DOMString 或任何具有字符串化方法的对象，如果 url 是相对 URL，则会将 base 用作基准 URL。如果 url 是绝对 URL，则无论参数 base 是否存在，都将被忽略。

base可选：一个表示基准 URL 的字符串，当 url 为相对 URL 时，它才会生效。如果未指定，它默认为 undefined。

vue2和vue3配置别名后都可以在css中都可以使用@别名，但是vue3动态引入图片时候只能使用new URL,因为vue3使用的是vite，而require是属于webpack的函数。文章来源地址https://www.toymoban.com/news/detail-641994.html

到了这里，关于在Vue中动态引入图片为什么要用require的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

在Vue中动态引入图片为什么要用require