Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在已有的项目中将img替换为该组件,但出现异常 #1

Open
xhwgood opened this issue Mar 18, 2022 · 2 comments
Open

在已有的项目中将img替换为该组件,但出现异常 #1

xhwgood opened this issue Mar 18, 2022 · 2 comments

Comments

@xhwgood
Copy link

xhwgood commented Mar 18, 2022

安装依赖,并在 main.js 中导入并使用组件,然后替换项目中的标签(均为vue文件,未使用jsx语法)

-<img
+<LazyBackground
  src="./imgs/point.png"
  class="row-icon"
>

替换后本地启动开发,发现图片无法显示,devTools截图
image

希望作者能看下,感谢

@wuyxp
Copy link
Owner

wuyxp commented Mar 18, 2022

@xhwgood 你好,十分感谢使用,并且提问题,这个组件和对应的方法是几年前写的,有的 api 或者写法可能过期。
但是针对于你这个问题,我目测应该是 src 传入的图片地址有问题,src 那边应该传编译后的路径,而非相对路径。可以尝试这样写

<LazyBackground
  :src="requre('./imgs/point.png')"
  class="row-icon"
/>

@xhwgood
Copy link
Author

xhwgood commented Mar 18, 2022

改成动态引入后也无效,png图片正常,但webp图片还是像我上面的截图一样

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants