Nuxt3项目中的问题汇总-图片未显示

最新推荐文章于 2024-05-05 16:09:23 发布
最新推荐文章于 2024-05-05 16:09:23 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： nuxt3 文章标签： vue.js 前端 javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38661597/article/details/129439102
版权

有时候会根据后台返回的数据拼接图片路径，nuxt项目中，assets下的文件是会被打包编译的，:src=“~/assets/img/${item['xxx']}.png"看图片地址会成为/_Nuxt/XXX,在本地开发的时候加上/_Nuxt/确实可以了，但是打包发布后，会找不到图片。目前发现有两种解决办法
1，把相应的图片丢服务器上，图片地址用网络地址http//www.
2，把要匹配的图片放在public下（nuxt3是public，不是static）。public文件下新建img文件，里边放图片，使用:src=”/img/${item['xxx']}.png"

一颗水晶大白菜
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nuxt中一些常见的图片资源不显示问题
weixin_48150129的博客
03-10 3695
我在刚开始实习的时候的第一个任务就是通过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选项，请也将dayjs添加到您的项目中，或使用@nuxtjs/dayjs 将@nuxtjs-extra/ant-design-vue到nuxt.config.js的modules部分 { modules : [ // Simple usage '@nuxtjs-extra/ant-design-vue' , // With options [ '@nuxtjs-extra/an
Nuxt3 试水（五）之Assets
m0_56806442的博客
11-01 1728
（用于Webpack）进行扩展，以处理其他类型的资产，如样式表、字体或SVG。Nuxt不会将assets/目录中的文件当成静态url，比如/assets/my-file.png。要在Nuxt组件样式中全局插入声明，可以在Nuxt.config文件中使用Vite选项。目录来存储这些文件，但此目录没有自动扫描功能，您可以使用任何其他名称。Nuxt使用两个目录来处理样式表、字体或图像等资产。文件，其中包含颜色变量，供您的Nuxt。目录中的图像文件，可在静态URL。在应用程序的代码中，您可以使用。
Nuxt3SEO优化指南
weixin_44531811的博客
02-20 932
本篇专栏基于笔者的Vue专栏，Nuxt3系列，如有不连贯之处可查看Nuxt3系列其他文章！特此说明。
解决nuxt3引入图片报错：ReferenceError: require is not defined
jiaohuizhuang6019的博客
12-14 1098
解决nuxt3引入图片报错：ReferenceError: require is not defined
nuxt.js使用v-binding绑定img的src的路径，图片不能渲染
骑着代码去流浪
10-06 5437
改成使用require引入图片路径 require('../../assets/images/team/richard-nash.jpg') 参考：https://github.com/vuejs-templates/pwa/issues/42
nuxt3 图片本地显示，打包后不显示踩坑
rojie0的博客
06-13 1087
1.静态文件根目录为 public，在根目录下新建 img文件夹。
nuxt.js中的静态图片显示不出来解决方法
weixin_38644630的博客
03-05 2804
nuxt.js中的静态图片显示不出来解决方法 <script> export default { data() { return { imgList: [ { name: "图1", url: require("../static/banner1.png") }, { name: "图2", url: require("../static/banner2.png") }, { name: "图3", url: requir
Nuxt.js 使用v-bind语法绑定img的src不显示问题
追梦i赤子心的博客
12-06 628
Nuxt.js 使用v-bind语法绑定img的src不显示……
nuxt.js的 XX is not defined
HeMister的博客
11-01 738
主要原因是因为 nuxt 不兼容的问题 需要在用之前在组件这样判断 参考文章： https://www.nuxtjs.cn/faq/window-document-undefined https://blog.csdn.net/qq_37124515/article/details/106467640 https://www.cnblogs.com/yifeng555/p/9955644.html ...
Nuxt3动态导入图片(本地) src
weixin_46965237的博客
11-24 1584
Nuxt3动态导入本地的图片，地址错误，图片无法显示
手把手教您使用Nuxt3框架(Nuxt3中文开发教程)-基于Nuxt3.0.0稳定版验证文档
11-25
本文档适合Nuxt3初学者学习和实践，资深者快速参考，爱好者持续跟踪新功能和最佳实践。从版本v3.0.0-rc.10开始参考官网手册和官方示例，从技术相关性、易于理解和方便查询来重新组织编写此文档，力求覆盖Nuxt3官网文档并进行扩展细化，补充实践经验，全部通过可用示例代码加深理解，让读者快速理解和使用Nuxt3。Nuxt3历时7个月经历14个RC版本，在2022年11月16至17日的Nuxt全球在线大会期间发布了v3.0.0稳定版，开启Nuxt3在产品级应用。互联网前端技术的发展总是适应着用户需求和互联网环境变化，从传统页面和数据混合一起的SSR（服务端渲染），到前后台分离的CSR（客户端渲染），再到基于Nuxt3的混合渲染，都是为了满足各种场景下应用的需求，并没有谁好谁差，也有可能同一个项目使用多种方式组合使用，最终适合自己应用和最高性价比的就是最佳。 Nuxt 3是基于Vite、Vue3和Nitro的Nuxt框架的全新重写，具有一流的Typescript支持，是两年多研究、社区反馈、创新和实验的结果。
详解Nuxt.js中使用Element-UI填坑
10-16
主要介绍了详解Nuxt.js中使用Element-UI填坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 有关工作原理的详细说明，请 。
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js ： export default { ... modules : [ 'nuxt-svg-sprite-loader' ] } 在页面中使用SVG： < template> < svg >< use xss=removed></ use></ svg > </ template> < script > import Logo from ' @/
关于nuxt 图片路径问题
yuange
04-13 6648
1 如果是使用的http 路径没有什么问题 2 如果你直接在src 里面使用本地图片，并且是相对路径，那么编译的时候会自动帮你编译成绝对路径 3 如果你使用的是本地图片，并且图片的路径是写在变量里面的，那么编译完成后路径不会被改变， 所以编译过后会中不到图片。 4 查看一下 2 里面的图片被编译后的路径，会发现前面多了一个 /_nuxt, 这个是根目录的意思， 所以如果你使用本地...
Nuxt引入vue-lazyload，图片懒加载
weixin_48240390的博客
07-20 1540
npm $ npm i vue-lazyload -S yarn $ yarn add vue-lazyload 在plugins文件夹新建vue-lazyload.js文件 import Vue from 'vue' import VueLazyLoad from 'vue-lazyload' const loadimage = require('../static/i.gif') const errorimage = require('../static/i.gif') Vue.use(VueL
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 418
注释很详细，直接上代码……
vue3 双向绑定：如何在自定义组件中修改props定义的属性值，并更新父组件绑定的响应式变量值
最新发布
Honiler的博客
05-05 412
在子组件中声明一个countprop，通过触发事件更新父组件值。
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 创建无缝滚动效果了。记得根据你的需求，自定义样式和调整参数配置。希望能帮到你！如果还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值