微信扫一扫 分享朋友圈

已有 795 人浏览分享

开启左侧

Vue 3怎样使用vite 2.0 动态引入加载图片 :src,

[复制链接]
795 0
控制台就报了一个错,说没有找到这张图片。
image.png
解决方法一
根据官网的提示,我找到了最简单的方法,就是在将asset 前面加上src。
<img v-if="post.welcomeScreen" :src="`/src/assets/blogPhotos/${name}.jpg`" alt="" />

解决方法二
关于第二个方法,官网说:“实际上,Vite 并不需要在开发阶段处理这些代码!在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”
因此,以下的方法开发阶段不需要了解。
首先把给src绑定一个函数,然后把需要图片名字传给函数。
<img :src="" alt="getImageUrl(name)" />
接着写这个函数
function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
}
这里面有两个知识点:new URL 和import.meta.url。
new URL()
创建一个新 URL 对象的语法:
new URL(url, [base])
    url —— 完整的 URL,或者仅路径(如果设置了 base),
    base —— 可选的 base URL:如果设置了此参数,且参数 url 只有路径,则会根据这个 base 生成 URL。
显而易见:
const path = new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url);
../assets/blogPhotos/${name}.jpg是相对路径,而import.meta.url 是base url (根链接)。
可以将这个path打印出来:

image.png
{
hash: ""
host: "localhost:3000"
hostname: "localhost"
href: "http://localhost:3000/src/assets/blogPhotos/coding.jpg"
origin: "http://localhost:3000"
password: ""
pathname: "/src/assets/blogPhotos/coding.jpg"
port: "3000"
protocol: "http:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
其中有一个属性是href,正好是函数的返回值!
import.meta
import.meta 对象包含关于当前模块的信息。
它的内容取决于其所在的环境。在浏览器环境中,它包含当前脚本的 URL,或者如果它是在 HTML 中的话,则包含当前页面的 URL。
因此可以把import.meta 打印出来:
console.log(import.meta);


image.png
可以看到,它有一个属性就是url。
综上,终于理解了上面的那个函数。
function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
}


免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-3-29 12:40 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。