vue中引入静态图片

标签：vue assets 静态 getAssetsFile pig url 引入 import

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'),         },

 

标签：vue,assets,静态,getAssetsFile,pig,url,引入,import
From： https://www.cnblogs.com/huanhuan55/p/16825714.html