vue3图片的新引入方式 方便nuxt项目使用

最新推荐文章于 2024-05-12 14:23:18 发布
最新推荐文章于 2024-05-12 14:23:18 发布
阅读量443 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobai215sl/article/details/131195867
版权

新建utils里面index

里面配置

export const getImageURL = img => {

return new URL(`../assets/img/${img}`, import.meta.url).href

}

页面使用

import { getImageURL } from "@/utils"

<img :src="getImageURL('install/icon1.png')" alt="">

这里是其他配置

'@': new URL('src', import.meta.url).pathname,

'@img': new URL('src/assets/img', import.meta.url).pathname,

我是学习笔记
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vite引入本地静态资源图片踩坑
qq_38850000的博客
05-12 1449
使用vite+vue3进行开发，遇到需要引入本地图片，按照百度上比较主流的方式使用new URL()来处理，但是图片一直不展示，url一直为undefined，代码如下。目前解决了问题但还是不知道为什么一个'/'会造成这个问题，希望有知道的大佬在评论区交流下！经过调试发现是'/'的问题，将上面的js代码改为。
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
nuxt-clipboard:使用vue-clipboard2的Nuxt.js的“复制到剪贴板”模块
05-01
Nuxt剪贴板 使用Nuxt.js的“复制到剪贴板”模块 :recycling_symbol: 设置 使用yarn或npm将nuxt-clipboard依赖项添加到您的项目中 添加nuxt-clipboard到modules的部分nuxt.config.js export default { modules : [ // simple usage 'nuxt-clipboard' , // with options [ 'nuxt-clipboard' , { autoSetContainer : true } ] ] , clipboard : { autoSetContainer : true } } :fire: 用法 您可以通过使用$的copytext在几乎任何情况下app.$copyText或this.
nuxt-firebase：使用firebase初始化nuxt项目
02-11
nuxt-firebase 构建设置 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate 有关工作原理的详细说明，请查看 。
create-nuxt-antd:使用ant-design的nuxt项目
05-15
适婚 使用ant-design的nuxt项目 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn run dev # build for production and launch server $ yarn run build $ yarn start # generate static project $ yarn run generate 有关工作原理的详细说明，请 。
vue3动态引入图片(:src)
Mr-yang的随笔
10-27 5564
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。
【Nuxt】Nuxt3 动态导入图片 src
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-17 938
nuxt3 不再支持 require 动态导入资源，因此需要我们将图片放到public目录下，这样我们就可以动态导入了。
Nuxt3动态导入图片(本地) src
weixin_46965237的博客
11-24 1723
Nuxt3动态导入本地的图片，地址错误，图片无法显示
Nuxt3-动态更改meta信息（关键词、标题、描述）
fat_shady的博客
08-02 5355
作为入坑nuxt3的新人 希望和大家一起分享和学习. 以下是我在开发中碰到以及已解决的seo优化问题。页面的meta设置对于SEO优化非常重要；为了搜索引擎对关键词的收录，需要针对每个页面设置不同的关键词...
记录使用Nuxt3+Vite遇到的问题
gouwa626的博客
04-19 815
公司官网项目，基于antfu大佬的vitesse-nuxt3框架搭建，Nuxt3+Vite+Ts+Unocss，记录一下遇到的问题。安装，@unocss/preset-rem-to-px，在unocss.config.ts文件内引入,添加配置项。根目录创建env目录，创建需要的环境文件，如：.env.dev .env.test .env.pro。5、nuxt3公共组件会自动引入，但使用时写标签时需要从目录开始写，截取官方文档内容。4、部署二级目录需要修改nuxt.config.ts文件。
nuxt-composition-api提供了一种通过Nuxt特定功能使用Vue 3 Composition API的方法。-Vue.js开发
05-27
nuxt-composition-api提供了一种通过Nuxt特定功能使用Vue 3 Composition API的方法。 NuNuxt Composition API的Nuxt组成API钩子nuxt-composition-api提供了一种将Vue 3 Composition API与Nuxt特定功能结合使用的方法...
nuxt-ant-design-vue
05-08
nuxtjs-extra / ant-design-vue 适用于Ant Design Vue的Nuxt模块设置向项目添加依赖项yarn add @nuxtjs-extra/ant-design-vue @nuxt/components # or npm install @nuxtjs-extra/ant-design-vue 如果您使用useDayJs...
Vite项目打包优化
qq_42717015的博客
03-21 1010
Vite项目打包优化
Vue3+Vant3通过mock引入本地图片路径
NanChen的博客
08-16 3553
组件中通过new Url('路径/${图片}',import.meta.url).href。在接口中只需要写入图片名称，通过函数的形式拼接字符串，vite中有专门的写法。
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)
weixin_38345306的博客
10-26 1216
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)
vue3+vite 动态引入图片的方法
学而不思则罔
06-14 872
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。
new URL()在生产环境会出现的一种问题
Dawnchen1的博客
10-18 2288
new URL()再生产环境的异常情况
Nuxt3项目中的问题汇总-图片未显示
qq_38661597的博客
03-10 2031
nuxt3图片资源未显示。我是需要后台返回的数据来拼接图片路径。结果图片未显示。两个解决下办法，亲测有效。一是使用网络地址，二是将图片放在public下来引入，不要放在assets下，不要放在static下,......
picoCTF-Web Exploitation-Web Gauntlet
最新发布
huckers的博客
05-12 462
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
nuxt3项目vue-seamless-scroll
09-13
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，而 vue-seamless-scroll 是一个用于创建无缝滚动效果的 Vue 组件。 如果你想在 Nuxt.js 项目中使用 vue-seamless-scroll，可以按照以下步骤进行操作： 1. 在你的 Nuxt 项目中安装 vue-seamless-scroll 包： ```shell npm install vue-seamless-scroll ``` 2. 在需要使用无缝滚动效果的页面或组件中引入 vue-seamless-scroll： ```javascript import Vue from 'vue' import VueSeamlessScroll from 'vue-seamless-scroll' Vue.use(VueSeamlessScroll) ``` 3. 在页面或组件中使用 `<vue-seamless-scroll>` 标签来创建无缝滚动效果，例如： ```html <template> <div> <vue-seamless-scroll :list="scrollList"> <template v-slot="{ item }"> <div>{{ item }}</div> </template> </vue-seamless-scroll> </div> </template> <script> export default { data() { return { scrollList: ['Item 1', 'Item 2', 'Item 3'] } } } </script> ``` 这样就可以在你的 Nuxt.js 项目中使用 vue-seamless-scroll 创建无缝滚动效果了。记得根据你的需求，自定义样式和调整参数配置。希望能帮到你！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值