vue动态引入图片
这篇文章主要介绍了关于vue图片路径的处理问题,在我们想要动态加载图片路径时,由于vue的打包原理不同,我们也有不同的处理图片路径方法,希望对大家有所帮助。如有错误或未考虑完全的地方,望各位斧正。...
前言
这篇文章主要介绍了关于vue图片路径的处理问题,在我们想要动态加载图片路径时,由于vue的打包原理不同,我们也有不同的处理图片路径方法,希望对大家有所帮助。如有错误或未考虑完全的地方,望各位斧正。
1、Vue2中动态图片路径处理
原因
在webpack中会将图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,将图片作为模块加载进去。
解决方案
使用 require()
解决
1、直接在标签中使用
<img :src="require(`../../../assets/image/${item.imgUrl}`)" />
2、在data中使用
<template>
<div>
<!-- 遍历图片 -->
<img v-for="(item, index) in ImgList" :key="index" :src="item.imgUrl" />
</div>
</template>
<script>
export default {
data() {
return {
ImgList:[
{imgUrl:require("../../../assets/image/1.png")},
{imgUrl:require("../../../assets/image/2.png")},
{imgUrl:require("../../../assets/image/3.png")}
]
}
}
</script>
3、style中动态背景图片路径处理
注意:背景图片一定要有宽高才可以显示
<template>
<ul>
<li class="bgImg" v-for="(item, index) in ImgList" :style="getBGImg(item.imgUrl)"></li>
</ul>
</template>
<script>
export default {
data(){
return {
ImgList:[
{imgUrl:require("../../../assets/image/1.png")},
{imgUrl:require("../../../assets/image/2.png")},
{imgUrl:require("../../../assets/image/3.png")}
]
}
},
methods: {
// 获取动态背景
getBGImg(item) {
return {
backgroundImage: `url('${item}')`
};
}
},
}
</script>
<style scoped>
.bgImg {
background-position: center center;
width: 100%;
height: 100px;
}
</style>
2、Vue3 + TypeScript 中动态图片路径处理
由于打包工具的不同,我在这里把vue3拆分成 vite
和 webpack
版本
vuecli和webpack无法引入的原因
在webpack中其实是可以使用require的,但是ts无法识别require原因很简单,ts告诉我们:
找不到名称 “require”。是否需要为节点安装类型定义? 请尝试使用
npm i --save-dev @types/node
。
解决步骤
1、根据提示npm
npm i --save-dev @types/node
2、 修改ts配置项
在tsconfig.json文件中加上type:['node']
指定类型
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }],
"type":["node"]
}
3、使用
<img :src="require(`../../../assets/image/${item.imgUrl}`)" />
vite原因
1、vite只是一个基于es modules
的服务,有点类似于webpack的webpack-dev-server。
2、生产环境打包是基于rollup
的
CommonJS
和 es modules
的区别我们这里不多做描述,我们知道 es modules
是不支持require
的,所以在vite
中我们该怎么动态引入图片路径呢?
解决方案
我们可以在vite官网找到解决方案:Vite中静态资源处理
img动态绑定方法
<template>
<div>
<img v-for="(item,index) in imgList" :key="index" :src="imgUrl(item.imgUrl)">
</div>
</template>
<script setup lang='ts'>
const imgList = ref([
{ imgUrl: "./../../../assets/1.jpg" },
{ imgUrl: "./../../../assets/1.jpg" },
{ imgUrl: "./../../../assets/1.jpg" }
])
// 默认图片
const imgUrl = (url: string) => {
return new URL(url, import.meta.url).href
}
</script>
style动态绑定方法
注意:背景图片一定要有宽高才可以显示
<template>
<ul >
<li class="bgImg" v-for="(item, index) in ImgList" :key="index" :style="getBGImg(item.imgUrl)"></li>
</ul>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
const ImgList = ref(
[
{ imgUrl: "../../../../assets/images/bg1.png" },
{ imgUrl: "../../../../assets/images/bg1.png" },
{ imgUrl: "../../../../assets/images/bg1.png" }
]
)
const getBGImg = (url: string) => {
return {backgroundImage: `url('${new URL(url, import.meta.url).href}')`}
}
</script>
<style scoped>
.bgImg {
background-position: center center;
width: 100%;
height: 100px;
}
</style>
更多推荐
所有评论(0)