在vue项目开发中, 为啥图片要用require 引入。。。而不是直接写本地路径

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue项目开发中, 为啥图片要用require 引入。。。而不是直接写本地路径相关的知识,希望对你有一定的参考价值。

使用require定义之后,你就可以动态使用了,不用require你就只能写死的。
不用 :src="'../img/image.jpg'" 会被解析为字符串

<img src="../img/image.jpg"> // 正常加载
<img :src="'../img/image.jpg'"> // 动态地址,路径被加载器解析为字符串,图片找不到


使用

src1:require('../img/image1.jpg'),
src2:require('../img/image2.jpg'),
index: 1,

<img :src="index = 0 ? src1: src2"> // 动态地址,正常加载

参考技术A 都可以的,两种方式都行,而且图片的话,一般都是直接引入,不用require
请采纳
参考技术B 这个就是相对路径引入的哦

vue中require引入asset文件夹图片地址(个人笔记)

参考技术A

项目中引用的图片都直接引用静态目录static下的图片,如果图片放到src\\assets目录下,项目中引用图片的相对路径,在vue打包的时候会改变图片的引用名称,所以会出现访问不到图片的情况。
如果把图片放到asset文件夹里:

以上是关于在vue项目开发中, 为啥图片要用require 引入。。。而不是直接写本地路径的主要内容,如果未能解决你的问题,请参考以下文章

在使用vue脚手架时为啥不能加载favicon.ico图标

vue实现图片隐藏判断支付成功后怎么显示图片

webpack 打包和手动创建一个vue的项目

Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

为啥要用nodejs

Vite中不能使用require,该怎么动态获取静态图片资源?