使用require 动态引入图片(适用于 webpack 项目): 在某些情况下,可以使用 require 动态引入图片: html <img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo"> 检查数据响应性: 确保item.imgSrc 是响应式的。如果 item 是后来添加到数组中的,
那动态添加的src如果我们没有使用require引入,最终会打包成什么样子呢,我带大家实验一波。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 // vue文件中动态引入一张图片<template><divclass="home"><!--通过v-bind引入资源的方式就称之为动态添加--><img:src="'../assets/logo.png'"alt="logo"></...
所以,动态引入才是王道啊~如果想写成动态的呢,可以试试如下办法: **图片当作一个模块加载 ** 方式1: <img:src="logo">import logo from '@assets/images/avatar.png'; data() {return {logo} } 方式2: <img:src="logo">data() {return {logo:require("@assets/images/avatar.png")} } 注意错误写...
那动态添加的src如果我们没有使用require引入,最终会打包成什么样子呢,我带大家实验一波。 // vue文件中动态引入一张图片 <template> <divclass="home"> <!-- 通过v-bind引入资源的方式就称之为动态添加 --> <img:src="'../assets/logo.png'"alt="logo"> </div> </template> //最终编译的结果(浏览...
这个报错的原因是scope.row.exchange的值为undefined,导致动态导入图片的路径出现了问题。可以通过给路径加上一个默认值来解决这个报错: :src="require(`@/assets/images/followOrder/${scope.row?.exchange?.toLowerCase() || 'default'}-icon.svg`)" ...
vue中require动态加载图片 <template> <img src="D:/images/01.png"alt="静态加载"> <img :src="require('D:/images/01.png')"alt="动态加载1"> </template> 如果需要加载图片列表路径list = [imgpath,imgpath1,imgpath2, ...]时,使用require(imgpath)加载可能加载不出甚至报错,这是因为require动态...
答:不会,使用require引入资源的前提的该资源是webpack解析的模块,而public下的文件压根就不会走编译,也就不会使用到require。 8.为什么使用public下的资源一定要绝对路径 答:因为虽然public文件不会被编译,但是src下的文件都会被编译。由于引入的是public下的资源,不会走require,会直接返回代码中的定义的文件地址,该...
vue项目中img的src动态赋值 没想到这破东西,居然这么折腾人。 时间紧,长话短说。一般这个动态赋值,要用require。而且,这个require里,只能有一个变量,多个变量,有运算,有方法,都不行。 1、不行 <img :src="require(`@/${state.path + }`)" :alt="photo.text"...
3、使用**require**动态加载 <img:src="src">//data中定义变量src data() { return { src: require('../images/demo.png') } } 4、引入**publicPath**并且将其拼接在路径中,实现引入路径的动态变动 <img:src="publicPath + 'images/demo.jpg'"alt="">// √ ...
因为动态的添加的src编译过后的地址,与图片资源编译过后的资源地址不一致, 导致无法正确的引入资源 1 2 编译过后的src地址:../assets/logo.png 编译过后的图片资源地址:/img/logo.6c137b82.png 那要怎么解决上述的问题呢,答案就是:require 4. 加上require为什么能正确的引入资源,是因为加上require就能编译了?