Fork me on GitHub

vue中引入静态图片

vue+webpack中,可以使用require
 imageList: [
      {
          url: require('../image/pig.png')
      }
    ]
vue+vite没有require方法
// 静态图片一般放在src/assets下面

1. 单个文件
import pig from '@/assets/images/pig.png'

<img :src="pig " />

2. 多个文件 new URL() + import.meta.url
   vite文档: https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
   1.  在utils中创建一个方法getImage.js
   // 获取assets静态资源
      const getAssetsFile = (url) => {
          return new URL(`../assets/deliveryStrategyImages/${url}`, import.meta.url).href;
      };
      export default getAssetsFile;
2. 使用
        import getAssetsFile from '@/utils/getImage';
        iconImg: [
        {
          img: getAssetsFile('oneDeployment.svg'),
        },

 

posted @ 2022-10-25 17:44  欢欢11  阅读(284)  评论(0编辑  收藏  举报