其他分享
首页 > 其他分享> > vue如何动态加载本地图片

vue如何动态加载本地图片

作者:互联网

大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。

以下正

今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章。

通常,我们的一个img标签在html中是这么写的:

<img src="../images/demo.png">

这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理。

如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定。

<img :src="src">

//data中定义变量src
data() {
  return {
    src: '../images/demo.png' 
  }
}

然而这时候,会发现这个时候图片并没有被加载出来,图片没有显示出来,通过查看发现这张图片的地址显示 ../images/demo.png ,也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader处理,只会做简单的文本替换。

那怎么办呢?

解决方法

1、将图片转**base64**格式

<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

一般图片比较小的可以这么做,比如图标icon等,大小一般在10KB以内的。

2、使用**import**引入图片

<img :src="src">

//使用import引入
import img from '../images/demo.png'

//data中定义变量src
data() {
  return {
    src: img 
  }
}


3、使用**require**动态加载

<img :src="src">

//data中定义变量src
data() {
  return {
    src: require('../images/demo.png')
  }
}


4、引入**publicPath**并且将其拼接在路径中,实现引入路径的动态变动

<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// 编译后:
<img src="/foo/images/demo.jpg" alt="">
<script>
export default:{
    data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },
}
</script>

vue.config.js中配置publicPath路径:

//vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

结论

静态资源可以通过两种方式进行处理:

标签:src,vue,return,publicPath,本地,images,加载,data,图片
来源: https://blog.csdn.net/m0_49789433/article/details/122683159