首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Laravel-mix在vue组件中看不到连接的图片<img src="">

Laravel-mix是一个强大的前端构建工具,用于在Laravel应用中进行前端开发。它提供了简洁的API,使得在Vue组件中引用图片变得方便。

当在Vue组件中使用<img src="">标签引用图片时,可以按照以下步骤进行配置:

  1. 首先,将需要引用的图片放置在项目的resources/assets/images目录下(如果没有该目录,可以自行创建)。
  2. 在Vue组件中,使用require关键字引入图片:
  3. 在Vue组件中,使用require关键字引入图片:
  4. 确保在webpack.mix.js配置文件中的mix.js()方法之前,添加以下配置代码:
  5. 确保在webpack.mix.js配置文件中的mix.js()方法之前,添加以下配置代码:
  6. 运行构建命令来编译前端资源:
  7. 运行构建命令来编译前端资源:

上述配置步骤假设你的Vue组件位于resources/assets/js/components目录下,如果不是,请根据实际情况修改@别名的路径。这样,你就可以在Vue组件中成功引用图片了。

推荐的腾讯云产品:如果你需要在云计算环境中部署和托管你的Laravel应用,可以考虑使用腾讯云的云服务器(CVM)。腾讯云的云服务器提供高性能、稳定可靠的计算资源,能够满足各种规模和需求的应用。你可以访问腾讯云的云服务器产品页面(https://cloud.tencent.com/product/cvm)获取更多信息和详细介绍。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

hevue-img-preview 仅需传入urlvue图片预览组件

hevue-img-preview 简介 本组件基于 vue 编写,仅传入一个图片地址,即可实现图片预览效果,比较适合给文章及页面的所有图片添加预览效果,预览背景色,关闭按钮颜色,控制条背景也和字体颜色都可自定义...--save # main.js 引入 import hevueImgPreview from 'hevue-img-preview' Vue.use(hevueImgPreview) # 使用...给任意对象添加任意事件,例如 即可在事件里调用方法进行预览 methods: { previewImg (url...$hevueImgPreview() 方法可以接收一个字符串类型 url,或者对象类型配置,具体使用方法如下 this.$hevueImgPreview('img.png') this....controlBackground #fff 或者 rgba(255,255,255,.1) 控制条背景颜色 closeColor #fff 或者 rgba(255,255,255,.1) 关闭图标的颜色 作者注 开发过程中

1.1K30

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

然后 resources\views\welcome.blade.php文件 ,将其修改为下面的代码 将原来HTML删了,添加一个id为appdiv,在其中使用app.js 中注册组件,需要注意就是要添加.../node_modules/laravel-mix/src/index和 ....Vue-router 使用 这里扩展Vue-router使用,首先,我们要安装vue-router组件 npm install vue-router --save 然后我们 resources.../components/Example.vue'], resolve)) }, ] }) 然后我们来修改 app.js 文件,我们需要引入刚才路由文件,Vue创建时添加路由和...到这里,我们路由配置就完成了,如果需要添加更多路由,可以router.js 中添加一条路由,然后路径指向相应组件就ok了。

1.4K20
  • 前后端分离探索——MVC 项目升级一个过渡方案

    传统 MVC 项目直接升级到前后端分离需要大量时间与人力,在业务多变阶段并不适合,所以便有了本文过渡方案探索 路由先不分离,仍然采用 PHP 提供路由 模板部分分离,原 PHP 模板中,引入...-- 约定 一个页面对应一个 Vue 组件 --> 1 2 3 4 5 6 暂时找不到很好解决缓存方案,所以统一不缓存 新建前端控制器 public/mix/resources/js/test/index.js...'; import Mixin from '@utils/mixin'; Vue.use(ElementUI); Vue.use(Mixin); // 全局组件、方法、计算属性等 new Vue({...访问路由,PHP 渲染模板,返回给浏览器 浏览器加载 Vue,交由 Vue 渲染页面 # 局限 不能做到全局自动加载组件 编译后文件大小可能会很大 # 优势 可以更好地编写复杂页面 更好维护性

    1.2K20

    前人铺路系列组件之hevue-img-preview,一款传入地址支持单图多图预览vue图片预览组件

    hevue-img-preview 简介 ❝ 本组件是一个基于 vue 编写 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果。...页面各组件颜色均可可自定义,实现个性化设计。...--save # main.js 引入 import hevueImgPreview from 'hevue-img-preview' Vue.use(hevueImgPreview) # 使用...给任意对象添加任意事件,例如 <img :src="src" @click="previewImg(url)"> 即可在事件里调用方法进行预览 methods: { previewImg...字段 值 备注 url 图片本地或者线上地址,多图预览时可不传 预览图片地址,多图预览时省略 mainBackground #fff 或者 rgba(255,255,255,.1

    53730

    【玩转腾讯云】已有laravel 添加vue

    S 安装vant cnpm i vant -S 安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 写法自动转换为按需引入方式...npm i babel-plugin-import -D 根目录下创建.babelrc文件,并在其中配置plugins(插件) "plugins": [ "transform-vue-jsx...} from 'vant' export default { components: { [Loading.name]: Loading } } Vant UI 组件库做...van-circle__layer'] }) ] } } } } rem适配 rem适配文档上建议使用lib-flexible,flexible适配原理是物理像素与逻辑像素相互转化...,由于rootValue: 37.5为基准,写css时候设计图上文字大小多少像素就写多少像素即可 cnpm install axios --save 第二 laravel-mix使用postcss-px-to-viewport

    3.6K30

    初探webpack之从零搭建Vue开发环境

    -- built files will be auto injected --> 启动npm run build,我们就可以/dist/index.html文件中看到注入成功代码了...搭建Vue基础环境 首先我们可以尝试一下对于.js中编写Vue组件进行构建,即不考虑单文件组件.vue文件加载,只是构建一个Vue对象实例,为了保持演示代码尽量完整,此时我们src下建立一个main.js...: 30px; } 之后运行npm run dev,就可以看到效果了,可以控制台Element中看到,小于8K图片被直接转成了base64,而大于8K文件被当作了外部资源进行引用了.../tab-b.vue两个组件,以及承载这两个组件src/views/framework.vue组件,之后将App.vue组件仅作为一个承载容器,以及src/main.js引用了VueRouter,主要是一些...yarn add vuex 之后主要是新建了src/store/index.js作为store,修改了src/views/framework.vue实现了一个从store中取值并且修改值示例,最后src

    1.1K30

    【腾讯云Cloud Studio实战训练营】用Vue+Vite快速构建完成律师H5页面

    图片工作空间内代码运行环境,您可以选择预置环境,包含 Ubuntu、Python、Java和 Node.js 四种;也可以选择将其连接到自己云服务器上。...点击 Vue.js 模板卡片,进入集成环境加载页面,加载成功后即可进入开发环境进行编程,如下:图片当我们点击完框架之后,等待不到 30s 左右(与带宽网速差异有区别),开发环境就初始化配好了。...Vant:yarn add vant@^3.6.12基于 vite、webpack 或 vue-cli 项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件...,并按需引入组件样式,如下:// —D表示安装到开发依赖中yarn add -D unplugin-vue-components@^0.22.7本项目是基于 vite 项目,所以,根目录下,vite.config.js...完成以上安装和如下修改配置文件两步,就可以直接在模板中使用 Vant 组件了,unplugin-vue-components 会解析模板并自动注册对应组件

    25200

    Vue中显示img图片,显示不出来怎么办?vue显示图片

    大家好,又见面了,我是你们朋友全栈君。 1、近期在学习Vue中发现了一个难点就是显示图片 试了很多办法都不行,有的还保错。后来我找了很多人,以及网上找资料终于被我给找到了。...2、如何你是一个普通组件的话,那么这样就可以了 <img src="....."@/assets/images/fk.jpg") } 有时候我们组件可能是一个子组件或者子子组件那么我们这样写 import imgUrl from '@/assets/images.../是访问不到,那么可以试试使用下面 @代替 src目录 require(“@/assets/images/xxx.jpg”) 以上都不行,试试更换图片存放目录到 static 文件中 查询效果 ==...》 Vue显示图片 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151977.html原文链接:https://javaforall.cn

    9.5K10

    使用Vite重构Vue3项目

    image-20220804230914786 解决方案 打开Login.vue文件后,发现我用require导入了一些图片文件,VueCLI环境下require会交给webpack处理。...翻了下文档后,静态资源处理章节发现他有两种处理方法: 通过import语句直接导入图片 通过new URL来导入图片 我打算将所有组件都重构为setup形式,因此直接使用import方式来导入图片可以保持组件一致性...我们写个简单demo来尝试下,如下所示: <script lang="ts" setup...(@typescript-eslint/no-unused-vars) image-20220806231446097 解决方案 eslint-plugin-vue 插件Issues中看到有人遇到了跟我同样问题...我做法如下: src下创建resource文件夹 根据功能类型创建ts文件,将其导出 import defaultAvatar from "@/assets/img/login/LoginWindow_BigDefaultHeadImage

    1.9K10

    Laravel 项目中使用 webpack-encore

    看过我之前写过博客应该知道我一直是 laravel-mix 死忠粉,有好几篇文章都是关于它。每每提到 laravel-mix 时更是不吝溢美之词。...安装依赖 首先当然是安装依赖 yarn add -D @symfony/webpack-encore 需要注意是,webpack-encore 没有像 laravel-mix 那样自己内部依赖 vue-tempplate-compiler...之类包,所以如果自己项目里用动了这些,需要自己项目里手动安装好。...相比于 laravel-mi,encore API 以及一些默认配置方面考虑得更为科学和全面,想要配置 vue-loader 或者 ts-loader 之类,只需要调用相应方法。...当然,更为重要是,mix4 里因为一些 bug 而无法使用功能, encore 里却正常,如 dynamic import。

    2.1K20

    【腾讯云 Cloud studio 实战训练营】真正做到让你开发成本只在编码

    ,该说不说单从前端审美方面,这个家效果酷毙了 初始化框架图片很快时间一个vue框架初始化完成,并且右侧自动呈现了效果;图片...非也,基于 vite、webpack 或 vue-cli 项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件样式。.../src', import.meta.url)) } }})完成以上安装和修改配置文件两步,就可以直接在模板中使用 Vant 组件了,unplugin-vue-components 会解析模板并自动注册对应组件... src/main.js 文件中引入包和库。import { createApp } from 'vue'import App from '....平台点击创建项目;选择了第一个模板图片创建完成后我们回到主页,然后点击这里确认授权就好了;图片点击发不到CODING储存库=》选择账号=》选择项目图片---Cloud Studio 开发贪吃蛇上面按照官方提供模板我们进行了尝试

    32530

    VUE+TS】1.0 Vue3.0+TS打造企业级组件

    目的 使用vue单元测试库保证代码质量 开源项目的开发发布流程 设计合理设计广泛适用API 如何保证代码质量 vue3实现原理 表单组件库 高频场景 交互复杂 定制型高 涉及到数据(...内容结构 项目结构 开发模式讲解:JSX开发模式 vue3TS规范定义(vue3源码全部使用TS编写) 单元测试 高泛用性API 响应式原理(vue3原理) 完善功能开发(组件开发...image.png 是否ts基础上使用babel,这是需要 , 选择y。...vue3中TS如何去定义组件——Component接口 vue3中提供了一个defineComponent函数。 函数实现直接返回了组件定义。...', { alt: 'Vue logo', src: img }), h(HelloWorld, { msg: '欢迎来到Vue+TS 应用现场', age

    69811

    详解 Vue 目录及配置文件之 node_modules,src,static,test 目录

    里面包含了几个目录及文件: ♞ assets:放置一些图片,如 logo  ♞ components:放置一些组件 ♞ views:页面(视图)组件 ♞ router.js:路由脚本文件 ♞ App.vue...1.3 src assets:放置静态资源,包括公共 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。...项目里总会有一些复用组件,例如弹出框、发送手机验证码、图片上传等,将它们作为通用组件,避免重复工作; views:放置主要页面的组件。例如登录页、用户信息页等。...App.vue <img src="....static 放不会变动文件。这是通过 config.js 文件中 build.assetsPublicPath 和 build.assetsSubDirectory 连接来设置

    3.9K20
    领券