vue cli如何在项目中引入本地图片?

 时间:2026-04-23 02:28:13

1、vue在项目中引入本地图片时,可以把图片放在static目录下,但是cli3版本以上不再有static目录,而是需要把本地图片放到src/assent下面

vue cli如何在项目中引入本地图片?

2、写法中,一般我们会用到图片的相对路径,例如:../../../assets/images/XXX.jpg,但是这样写比较繁琐,以及打包之后路径会产生变化,因为需要去写一个动态的代码去引入,写法如下:

import water from "@/assets/images/水.jpg";

直接写为@/assets/images/水.jpg且导出一个新的名字为water 

vue cli如何在项目中引入本地图片?

3、在需要使用图片时,写法如下:

  style: {

          image: water,

            }

vue cli如何在项目中引入本地图片?

4、或者设置背景图片时,写法如下:

img: require("@/assets/images/loginBackground.jpg")

vue cli如何在项目中引入本地图片?

5、在template引用时写法如下

:style="{backgroundImage:`url(${img})`}"

这样动态的引入,不会像相对路径那样比较死板,无论你在哪个组件中引入,只需要@即可解决

vue cli如何在项目中引入本地图片?

  • vscode怎么在终端显示结果
  • Intellij IDEA怎么远程代码仓库pull获取到代码
  • jQuery如何获得div后面的标签或标签内容
  • js中怎么获取select中option之间的文本信息
  • jquery 获取table最后一行的某一列
  • 热门搜索
    热感冒怎么办 普通话怎么考 硬盘坏道怎么修复 工作展望怎么写 鲅鱼干怎么做好吃 甲沟炎怎么治疗 遇到危险怎么办 &怎么读 蛤蜊怎么读 微信群怎么建