人力资源网站模板,制作公司网站 优帮云,51的网站是啥,制作灯笼的过程和步骤目录 1、将图片放入public文件夹中 2、使用 /src/.... 路径开头 3、生成图片的完整URL地址#xff08;推荐#xff09; 1、将图片放入public文件夹中 使用图片#xff1a;路径为 /public 开头 templatedivimg :src/public/${flag ? 01 : 02}.jp…目录 1、将图片放入public文件夹中 2、使用 /src/.... 路径开头 3、生成图片的完整URL地址推荐 1、将图片放入public文件夹中 使用图片路径为 /public 开头 templatedivimg :src/public/${flag ? 01 : 02}.jpg alt /button clickflag !flag动态切换图片/button/div/templatescript setup
import { ref, reactive } from vue
const flag ref(false)
/scriptstyle scoped
img {width: 500px;height: 500px;vertical-align: middle;
}
button {width: 100px;height: 50px;
}
/style2、使用 /src/.... 路径开头 图片位置位于 src 目录下 可以使用 /src/... 动态引入图片 templatedivimg :src/src/assets/images/${flag ? 01 : 02}.jpg alt /button clickflag !flag动态切换图片/button/div
/templatescript setup
import { ref, reactive } from vue
const flag ref(false)
/scriptstyle scoped
img {width: 500px;height: 500px;vertical-align: middle;
}
button {width: 100px;height: 50px;
}
/style致命问题使用这种方式本地看起来很正常但是部署到生产环境图片就加载不出了因为打包后路径出现了问题 3、生成图片的完整URL地址推荐 图片位置位于 src 目录下 通过手写 getImageUrl函数 动态生成图片URL地址 templatedivimg :srcgetImageUrl(flag ? 01.jpg : 02.jpg) alt /button clickflag !flag动态切换图片/button/div
/templatescript setup
import { ref, reactive } from vue
const flag ref(false)function getImageUrl(url) {const path new URL(./assets/images/${url}, import.meta.url)return path.href
}
/scriptstyle scoped
img {width: 500px;height: 500px;vertical-align: middle;
}
button {width: 100px;height: 50px;
}
/style注意getImageUrl函数中使用的地址是相对位置的地址 该函数位于 App.vue 文件中 所以 getImageUrl函数 中的地址是 ./assets/.... 当该函数所处的文件地址变化时找图片的地址也要相对发生变化 解释一下getImageUrl函数中代码的作用和意思 作用 这个函数是用来获取图片的 URL 地址的。它接受一个参数 url然后使用 new URL() 构造函数创建一个新的 URL 对象其中包含了 ./assets/images/ 目录下的图片路径。在这个路径中url 参数用于指定具体的图片文件名或路径。最后通过 path.href 返回完整的 URL 地址。 意思 1、new URL() 构造函数创建了一个新的 URL 对象。 2、这个 URL 对象的第一个参数是一个字符串表示相对路径 ./assets/images/这里假设这是图片文件存放的目录。 3、第二个参数 import.meta.url 是 Node.js 中的一个特殊变量它指向当前模块文件的 URL 地址。 4、函数将传入的 url 参数附加到 ./assets/images/ 路径后面得到了完整的图片路径。 5、最后通过 path.href 返回这个完整的图片 URL 地址。
