给img的src中放入参数

给img的src中放入参数

老师你好,我尝试把shop中的img储存在一个file中然后通过引入路径来导入img


下面这种ES6写法为什么不对?

https://img1.sycdn.imooc.com//climg/61b1686d096ffe5d05820104.jpg


我有用了这种:src的写法(老师你顺便解释一下为什么这要要在src前面加上:才能成功引入)

https://img1.sycdn.imooc.com//climg/61b1690a099d932205380100.jpg

https://img1.sycdn.imooc.com//climg/61b1692709ca4a6217860562.jpg

这个地方的src路径被成功引入了,但是没有显示图片这是为什么

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2021-12-09 10:57:22

同学你好,解答如下:

1、使用框架时,要按照框架支持的语法(要求的语法)来实现需求。

vue中,渲染图片的src地址时,支持如下两种写法:

https://img1.sycdn.imooc.com//climg/61b16df109d39c8308010138.jpg

同学的如下写法,vue会把引号中的内容当成普通字符串解析,导致图片路径不对,所以显示不出来

https://img1.sycdn.imooc.com//climg/61b16e240930bde707790118.jpg

https://img1.sycdn.imooc.com//climg/61b16e3109809da613270170.jpg

而写成:src时,会把引号中的内容当成变量来解析:

https://img1.sycdn.imooc.com//climg/61b16f7b0942680d07740076.jpg

这样逻辑是才是对的。

2、同学的:src的写法,之所以显示不出来图片,还因为src的路径不对,不能写成相对路径:

https://img1.sycdn.imooc.com//climg/61b1702109ee788908880106.jpg

如果想使用本地的图片,需要使用require方法引入:

https://img1.sycdn.imooc.com//climg/61b1706509d3a48a11880447.jpg

同学试试。

祝学习愉快!

  • 提问者 weixin_慕圣6334738 #1
    太牛了老师
    2021-12-09 11:53:09
  • 提问者 weixin_慕圣6334738 #2

    现在还有个问题, 那既然我这个img的相对路径是存放在mongodb中的,  这个时候我可能要用你说的第二种方法使用变量来导入路径,但是我不可能在:src= 后面使用require把,我需要怎么做

    2021-12-09 12:17:22
  • 同学你好,require这种方式没法应用于数据库中,vue不识别:

    https://img1.sycdn.imooc.com//climg/61b1944e09a24a7404320125.jpg

    它只能直接应用于vue的模板和js中:

    https://img1.sycdn.imooc.com//climg/61b194c3098ef2f307690143.jpg

    https://img1.sycdn.imooc.com//climg/61b194e80914284a06400190.jpg

    数据库中,不要使用相对路径,建议换成绝对路径,比如:

    https://img1.sycdn.imooc.com//climg/61b1951c0991761005190122.jpg

    对应请求的是后端public文件夹:

    https://img1.sycdn.imooc.com//climg/61b1953709a06a9504630479.jpg

    祝学习愉快!

    2021-12-09 13:34:49
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师