问题杂记-Vue组件中使用地址引入图片

一般我们在html 和css文件中需要用到图片时直接使用相对路径即可。如<img src="@/img/img1.png"/> background="url(@/img/img1.png)"但在vue中style中这样使用会出错，找不到文件。template模板中既可以使用相对路径，也可以使用别名@ style中可以使用相对路

可乐少点冰

5423人浏览 · 2018-03-21 23:32:53

可乐少点冰 · 2018-03-21 23:32:53 发布

一般我们在html 和css文件中需要用到图片时直接使用相对路径即可。如<img src="@/img/img1.png"/> background="url(@/img/img1.png)"但在vue中style中这样使用会出错，找不到文件。

template模板中既可以使用相对路径，也可以使用别名@ style中可以使用相对路径不能使用webpack中配置的路径别名

解决方法：

1.使用相对路径../../img/img1.png

2.在路径前加~,该方法在template中同样适用即 ~@/img/img1.png;不加的话会将其解析为./@/img/img1.png就没有@文件夹

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^