vue.js src图片显示不出来。

为什么我的图片显示不出来

clipboard.png

<template>

<div class="Div">

<div>

    <ul>
        
    <li v-for="item in list">
         <div class="divc"><img :src="item.img" alt=""></div>
         {{item.title}}
         <div class="adiv">
         <img :src="item.srci? '../../assets/喜欢.png':'../../assets/喜欢2.png'" @click="item.srci=!item.srci">
         </div>
         <div class="divh"></div>

    </li>
    </ul>
    </div>

    <daohang></daohang>
</div>

</template>
<script>

export default{
    data(){
return{
   //srci:'1'
   list:[
    {srci:true,img:'../../assets/1.jpg',title:'我的能量很少的,心也小小的'},
    {srci:true,img:'../../assets/2.jpg',title:'地球到星星没有捷径'},
    {srci:true,img:'../../assets/3.jpg',title:'没有一种爱不需要培养'},
    {srci:true,img:'../../assets/4.jpg',title:'有件事似乎已被我遗忘很久了'},
    {srci:true,img:'../../assets/5.jpg',title:'都是捕风,都是虚空'},
    ]

}

},

然后直接在img里加src="路径",图片又能显示出来

clipboard.png

<ul>

            <li><div class="divc"><img src="../../assets/1.jpg" alt=""></div>我的能量很少的,心也小小的<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/2.jpg" alt=""></div>地球到星星没有捷径<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/3.jpg" alt=""></div>没有一种爱不需要培养<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/4.jpg" alt=""></div>有件事似乎已被我遗忘很久了<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li class="divc2"><div class="divc"><img src="../../assets/5.jpg" alt=""></div>都是捕风,都是虚空<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
        </ul>
        
        
        
        怎么改啊。为啥F12那里的src不一样。。
阅读 20.4k
6 个回答

楼主,你好!
1,图片能正常显示是因为经过 webpack 处理了,从截图里也可以看出来(src 引用的资源变成了 base64 的)。这是因为 vue-loader 做了处理。可以参考官方文档,传送门

2,图片不正常显示肯定是因为路径的问题,定义在 data 里也是可以的,但是要用 require 关键字,这样就可以经过 webpack 处理,效果是一样的。


如有帮助,麻烦点击下采纳,谢谢~

图片属于一个静态资源,而不只是路径,应该作为资源导入

没用过vue,我相信原理是差不多的

react中是这样用的

var img1 = require('./img01.png');
var img2 = require('./img02.png');

render(){
    <img src={item.type?img1:img2} />
}

:src="status==1?require('../img/xxx.png'):require('../img/xxx.png')"

举个例子 要用require

这个我之前好像遇到过,动态改变imgsrc必须是绝对地址(ps:以/开头),常量可以是相对地址

额,你这是面向思否编程啊,一题又一题,你2个路径都不一样,你看看你图片放哪啊,把对的路径放到哪个list数组里面

你好,楼主:

如果 src 直接引用图片的话,可以写成 '../../assets/喜欢.png',例如:

<img src="../../assets/喜欢.png">

但是绑定变量的话,如下这样就不对了

<img :src="item.srci? '../../assets/喜欢.png':'../../assets/喜欢2.png'">

解决办法:

首先 import 一下

import imgUrl1 from '../../assets/喜欢.png'
import imgUrl2 from '../../assets/喜欢2.png'

然后在 data 中定义

data () {
    return {
        imgUrl1: imgUrl1,
        imgUrl2: imgUrl2
    }
}

最后修改一下 template

<img :src="item.srci ? imgUrl1 : imgUrl2">

原因就是楼上所说的,图片被处理过了,如果楼主非要直接写路径,可以尝试把图片放在 static 文件夹中,(static 文件夹中的资源不会被 webpack 处理),哦对了,如果楼主使用 vue-cli3.0 的话,没有 static 文件夹了,可以放在 public 中。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题