Question

我正在尝试更新图片的src，但现场只显示 <img class="imagedisplayor" style="float: none;" alt="" width="200" height="200" src=""/>

以下是代码：

function ajaxFigure(){
var url = 'index.php?option=com_fabrik&format=raw&view=plugin&task=userAjax&method=imgclasse';
var product = Fabrik.blocks.form_8.formElements.orders___product.getValue();
var update = $('orders___image').firstChild;
new Request({
    url: url,
    data: {
        method: 'imgclasse',
        'product': product
    },
    onComplete: function (r) {
        update.src = 'http://www.youtraining.eu/preview' + r.replace('images/', 'images/');
        document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=

\'\'  width=\'200\' height=\'200\'  src="' + r + '">'
    }
}).send();


}

这里是我的imgClasse（）

function imgclasse() {
$db = JFactory::getDBO();
$IdClasse = JRequest::getVar("product", "");  

$query = "SELECT product_image from products WHERE id=$IdClasse LIMIT 1";
$db->setQuery($query);
$result = $db->loadResult();
echo $result; 


}

更新了所有内容.. 我要做的是为下拉列表的每个元素显示一个图像，该列表是数据库中的条目。 Js和PHP是我可以使用的唯一方法，因为我在CMS中。

更改了var product = Fabrik.blocks.form_8.formElements.orders ___ product.getValue（）; 现在它返回正确的值..但问题仍然存在

Answer 1

根据您的密码：

onComplete: function (r) {
        update.src = 'http://www.mysite.com/preview' + r.replace('images/', 'images/');
        document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\'  width=\'200\' height=\'200\'  src=' + r + '>'
    }

我认为update.src是一个定义为的对象：

var update= {src:"..."};

因此，当您将值传递给此对象的.src键时：

update.src = 'http://www.mysite.com/preview' + r.replace('images/', 'images/');，

然后是：

document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\' width=\'200\' height=\'200\' src=' + r + '>'，

与r交换update.src因为r的值是您想要update.src包含的内容，包括.replace('images/', 'images/')
所做的替换

所以它应该是：

document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\' width=\'200\' height=\'200\' src=' + update.src + '>“

您可以确认您的r变量是否确实包含某些内容，或者完全可以通过执行以下操作来识别它：

onComplete: function (r) {

  console.log(r)
//Before running any other code

希望有所帮助！

Answer 2

简答：

您没有使用新值更新图像源。您将使用提供给函数的值更新它。在连接它时，还需要为src属性提供双引号。

document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\'  width=\'200\' height=\'200\'  src="' + r + '">'

建议：

如果我是你并且遇到了这个问题，我会对你的新图像路径执行console.log，以根据实际图像路径验证生成的路径。如果不知道r提供给你的函数的价值，很难说。

跳出来的另一个主要问题是你不需要完全替换图像元素。如果您直接引用图像元素然后将其src属性更新为新位置，那将更清晰。同样，如果没有更多信息，很难给你更具体的信息。

InnerHtml不会更新我的图像的src

2 个答案: