Vue之vue项目引入图片和设置路径别名

1、在vue项目中引入图片，图片放在static/img文件下，引用的时候这样写

<div class="img"><img src='static/img/face-1.jpg'>
</div>
//在static文件夹下的静态文件加入时不需要从引用出网上找，如不需要这样写
//'..../static/img/face-1.jpg'
//而只需要从static处开始写就行

2、设置路径别名
在vue项目中，有时会import一些组件，引入的文件要这样写

import searchFace from '../views/searchFace/searchFace'

这路径有时候两个点还好算一点，要是三个点四个点，着实让人头晕；
因此我们可以进行路径别名的设置，比如只要在src目录下的，我们用@来代替

//在webpack.base.config.js中
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}}

那么现在，只要在src下的文件都可以用@来开头
如果我这样设置：

resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','views': resolve('src/views'),}},

则说明所有在src/views文件夹下的文件的路径都可以用view来开头。

Vue之vue项目引入图片和设置路径别名相关推荐

Vue框架Vue-cli脚手架引入图片报错
Vue框架Vue-cli脚手架引入图片报错一.import导入图片方法第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在dat ...
html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
vue的v-for循环中图片加载路径问题
vue的v-for循环中图片加载路径问题产品要求要求图片和它的名字一一对应, vue中的img的src可以动态绑定到一个变量上 <template> <div><ul ...
c# 如何找到项目中图片的相对路径
c# 如何找到项目中图片的相对路径 string path = System.Environment.CurrentDirectory;//非Web程序 if (System.Environment. ...
php设置路径别名,react设置文件路径别名的具体方法你知道么
文章环境: "react": "^16.13.1" 版本 react官方脚手架默认是将webpack配置隐藏起来了,在进行配置之前需要将webpack给暴露出来 ...
idea vue项目设置路径别名（适用于@vue/cli 高版本）
方法一打开设置 File > Settings > Languages & Frameworks > JavaScript > Webpack 设置webpack c ...
vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
【vue】vue中设置路径别名
前言转载:https://blog.csdn.net/panchang199266/article/details/90145638 在 CSS 或者 JS 中,有时候需要引入其他相关文件,若目录层 ...
【vue3】vue3+ts+vite项目设置路径别名
解决流程 1.安装依赖 npm install @types/node -D 2.tsconfig.json配置 {"compilerOptions": {....."b ...

Vue之vue项目引入图片和设置路径别名

Vue之vue项目引入图片和设置路径别名相关推荐

最新文章

热门文章