vue里面的js引入图片,必须用require
vue里面的js引入图片,必须用requirevue中js引入图片,须用require引入一般情况下,我们在vue里面引入图片的话,基本上是这样子写的<img src="../../assets/logo.png" alt="">但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require下面列举例子以供参考<template><
·
vue里面的js引入图片,必须用require
vue中js引入图片,须用require引入
一般情况下,我们在vue里面引入图片的话,基本上是这样子写的
<img src="../../assets/logo.png" alt="">
但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require
下面列举例子以供参考
<template>
<div style="display:flex;">
<div v-for="item in imgUrl" :key="item.id">
<img :src="item.imgSrc" class="num" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
//下面的正确的 注意要用require
imgUrl: [
{ id: 1, imgSrc: require("../../images/1.jpg") },
{ id: 2, imgSrc: require("../../images/2.jpg") },
{ id: 3, imgSrc: require("../../images/3.jpg") },
//下面是错误的
// {id: 1, imgSrc: "../../images/1.jpg"},
// {id: 2, imgSrc: "../../images/2.jpg"},
// {id: 3, imgSrc: "../../images/3.jpg"},
],
};
},
created() {},
methods: {}
};
</script>
<style>
.num {
margin-right: 1px;
width: 300px !important;
height: 300px !important;
}
</style>
也可以这么写
const imgUrl = require('@/img/logo.png')
export default {
data(){
return {
tools: [{
id: 'image',
label: 'logo',
url: imgUrl
}]
}
}
}
解析
// 使用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"> // 动态地址,正常加载
或者 <img :src="require('../../../assets/'+item.name+'_icon.png')">
作者:好多柱
链接:https://www.jianshu.com/p/a0c5c4ecb445
来源:简书
效果
更多推荐
已为社区贡献11条内容
所有评论(0)