使用vite的import.meta.glob或import.meta.globEager,两者的区别是前者懒加载资源,后者直接引入。 工具文件目录:src/utils/pub-use.ts // pub-use.ts// 获取assets静态资源exportconstgetAssetsHomeFile=(url:string)=>{constpath=`../assets/images/home/${url}`;constmodules=import.meta.globEager("../assets...
require('@/assets/img/index/index1.jpg'), require('@/assets/img/index/index2.jpg'), require('@/assets/img/index/index3.jpg'), require('@/assets/img/index/index4.jpg'), require('@/assets/img/index/index5.jpg'), require('@/assets/img/index/index6.jpg'), require('@/assets/img...
import{getAssetsFile}from'@/util/public-use'// 可以包含文件路径 补充:如果是背景图片引入的方式(一定要使用相对路径) .imgText{background-image:url('../../assets/images/1462466500644.jpg');} 生产环境会自动加上hash,并且路径正确, 使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确. 转...
// 可以包含文件路径 1. 2. 3. 4. 补充:如果是背景图片引入的方式(一定要使用相对路径) .imgText { background-image: url('../../assets/images/1462466500644.jpg'); } 1. 2. 3. 生产环境会自动加上hash,并且路径正确, 使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确. 箴言:因为...
1. 如何在Vue3中引入本地图片? 在Vue3中,你可以使用require函数来引入本地图片。首先,将图片放置在项目的assets文件夹中,然后在你的组件中使用以下代码引入图片: <template> </template> export default { data() { return { imagePath: require...
这样写肯定是不对的,正确的写法应该使用v-bind: 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径。 现在,我们要在App.vue里使用位于src/assets/目录下的logo.png图片,于是,我们设: imgUrl = './assets/logo.png'...
本地图片一般存放在src/assets或者public目录下,public目录下的图片不会被webpack打包,src目录下面的图片会被webpack打包 在vue组件中的script中使用require引入,require里面为图片路径,一般用相对路径,注意require不能接收变量作为地址 require('@/assets/img.png') ...
使用vite的import.meta.glob或import.meta.globEager,两者的区别是前者懒加载资源,后者直接引入。 这里我们假设: 工具文件目录:src/util/pub-use.ts pub-use.ts // 获取assets静态资源 export default const getAssetsHomeFile = (url: string) => {
在Vue 3项目中,你还可以使用本地图片。为了使图片可以被正确引用,你需要将图片放在public目录或src/assets目录中。以下是使用本地图片的示例: 将图片放在public目录: <template> </template> 将图片放在src/assets目录: <template> </template> 在这个...
在个人做项目学习的过程中,想要将所有页面中涉及到的logo放在assets目录下,然后在组件中引用,遇到了如题所述的问题: 这是assets目录下的img文件夹: vue.config.js: less样式: 引入后虽然没有报错,但是页面并...