网站设计维护合同,肇庆关键词网站排名,自媒体视频发布平台,最热门网页游戏排行榜1、问题概述
常见情景1#xff1a;在VUE中使用img显示图片的时候#xff0c;通过传参的方式传入图片的路径和名称#xff0c;VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源#xff0c;从而出现了图片无法显示的情况。
常见情景2#xff1a;针…1、问题概述
常见情景1在VUE中使用img显示图片的时候通过传参的方式传入图片的路径和名称VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源从而出现了图片无法显示的情况。
常见情景2针对上述的问题我们有些人会使用require函数去设置程序告诉VUE你加载资源的时候加载本地资源这个时候回报错VUE使用require报错Uncaught Error: cannot module ‘asstes/logo.png’
2、常规的使用图片方式
1、img src”../images/1.png” /
2、img src”http://....//2.png” /
这种直接通过相对路径获取项目下的图片或者直接使用或传入网络资源是没有问题的。
3、期望使用动态的图片地址
案例说明在vue中通过ref创建了一个响应式的参数imgUrl,图片的路径是asstes/logo.png在template中img通过:src绑定使用了imgUrl这个时候图片是无法显示的。
原因vue没有将当前的图片信息当成是本地的静态资源处理而是当成了网络资源处理所以报错404找不到资源。
templatedivimg :srcimgUrl alt/div
/template
script
import { ref } from vue
export default {name: App,setup(){//简单数据的响应const imgUrlref(asstes/logo.png) return {imgUrl}}
}
/script4、通过require解决上述问题
我们对上面的代码进行改造告诉VUE你要加载本地的静态资源而不是网络资源
我们在img中的:src中加入了require,这个函数可以实现加载本地资源而给网络资源
但是这个有报错。
VUE使用require报错Uncaught Error: cannot module ‘asstes/logo.png’
templatedivimg :srcrequire(imgUrl) alt/div
/template
script
import { ref } from vue
export default {name: App,setup(){//简单数据的响应const imgUrlref(asstes/logo.png) return {imgUrl}}
}
/script4.1、问题分析最终解决
在Vue中img组件的src使用require加载静态资源不能使用变量因为require是编译时执行的而非运行时执行。在ES6中使用require加载静态资源的时候相对路径需要写死参数只传入名称就可以了。
代码改造如下
代码分析定义的imgUrl只包含了图片的名称logo.png,图片的静态资源asstes直接写死在require函数中。最终问题解决
templatedivimg :srcrequire(./assets/imgUrl) alt/div
/template
script
import { ref } from vue
export default {name: App,setup(){//简单数据的响应const imgUrlref(logo.png) return {imgUrl}}
}
/script
